0

LI のリストを指定すると、各 LI には次のようなチェックボックスが含まれます。

<li class="contact">
    <input type="checkbox" class="checkbox" name="checkableitems[]" value="1333">
    <div class="content">
        <cite>Baby James</cite>
    </div>
</li>

チェックボックスのクリックだけでなく、LIのクリックでチェックボックスを切り替えられるようにしたいと思います。私はあなたがここで見ることができるこの作品を手に入れました：

http://jsfiddle.net/xgB5X/2/

問題は、LIをクリックするとチェックボックスが切り替わりますが、チェックボックスを直接クリックしても壊れないことです。チェックボックスをクリックしてもトグルしなくなりました。これを機能させるための提案はありますか？ありがとう

4

6 に答える 6

4

なぜlabelタグを使用しないのですか?

<li class="contact">
    <input id='input1' type="checkbox" class="checkbox" name="checkableitems[]" value="1333">
    <label for='input1'>Baby James</label>
</li>

デモ

于 2012-07-24T17:27:11.980 に答える
3

http://jsfiddle.net/xgB5X/3/これを確認してください。

伝播を停止するコードを少し追加しました。liこれにより、イベントがタグに到達できなくなります。

$('input[type=checkbox]').on('click', function(e) {
    e.stopPropagation();
});

チェックボックスがクリックされたときに問題が発生しましたが、チェックボックスが含まれているため、イベントがliタグに到達すると、状態が変化していました。

于 2012-07-24T17:23:15.810 に答える
1

このjsFiddleのようなものを試すことができます

$('.listview li > *').children().bind({
    click: function(e) {
        checkbox = $(this).closest('li').find('.checkbox');
        checkbox.attr('checked', !checkbox.is(':checked'));
    }
});​
于 2012-07-24T17:25:04.537 に答える
1 
$('.listview li').on('click', function(e) {
      var c = $('.checkbox', this);
      c.prop('checked', !c[0].checked);
}).find('.checkbox').on('click', function(e) {e.stopPropagation();});​​​​​

フィドル

于 2012-07-24T17:27:30.800 に答える
1

いくつかのメモ:

.attr() の代わりに .prop() を使用します (すべてのブラウザーで相互に true/false を区別する方が簡単です。

click() 内のチェックボックスのクラス名の e.srcElement を確認できます。

$('.listview li').on('click', function(e) {

  if (e.srcElement.className === 'checkbox') {
      e.stopPropagation();   
      return;
  }

  checkbox = $(this).find(':checkbox');

   // Toggle Checkbox
   if (checkbox.prop('checked')) {
       checkbox.prop('checked', false);
   } else {
       checkbox.prop('checked', true);
   }

});

jsフィドル

于 2012-07-24T17:37:47.427 に答える
1

これにはラベルを使用する必要があると思いますが、ここではメソッドの動作です

$('.listview li').bind({
  click: function(e) {
      var checkbox = $(this).find('.checkbox').get(0);
      if (e.target == checkbox) return;
      checkbox.click();
  }
});

フィドル

于 2012-07-24T17:40:29.767 に答える