3

このチェックボックスがあります：

<div class="OuterDiv">
   <div class="InnerDiv">
      <input type="checkbox" name="tie" value="tie">Error in tie score<br>
   </div>
</div>

チェックボックスを切り替えるには、次のjqueryがあります。

$(document).ready(function() {
   $('.OuterDiv').click(function() {
      if ($(this).find('input:checkbox').is(':checked')) { 
         $(this).find('input:checkbox').attr('checked',false);
      } else {
         $(this).find('input:checkbox').attr('checked',true);
      }
   });
});

divをクリックしたときにチェックボックスを切り替えると、これはうまくいくようです。ただし、チェックボックス自体をクリックしても何も起こらず、トグルしません。

4

3 に答える 3

2

入力の周りがなければ<label>（全体DIVがクリック可能です）、次のように進みます：

LIVE DEMO

$(document).ready(function() {

   $('.OuterDiv').click(function(e) {
     var $chkb = $(':checkbox', this)[0];
     if(e.target !== $chkb) $chkb.checked = !$chkb.checked; 
   });

});

(No JS :)または、横のテキストをクリック可能
にしたい場合:checkbox
LIVE DEMO

<div class="OuterDiv">
   <div class="InnerDiv">
     <label>
      <input type="checkbox" name="tie" value="tie">Error in tie score<br>
     </label>
   </div>
</div>
于 2013-03-01T20:00:52.487 に答える
1

event.stopPropagation()を使用して、チェックボックスから発生するイベントの伝播を停止する必要があります。

$('input[type=checkbox]').click(function(e){
    e.stopPropagation();
});
于 2013-03-01T20:05:22.357 に答える
0

これにはjQueryを使用する必要はありません。以下のようにラベルタグを使用してください。

<div class="OuterDiv">
    <label>
        <input type="checkbox" name="tie" value="tie">Error in tie score
    </label>
</div>
于 2013-03-01T20:10:19.883 に答える