0

以下のコードの驚くべき問題:

<head>
    <script>
    $(function() {
        $('.select-all').click(function() {
            var isChecked = $(this).is(':checked');
            $(this).closest('section').find('input:checkbox').each(function() {
                $(this).attr('checked', isChecked);
            });
        });
    });
    </script>

</head>
<body>
    <section id="sect_1">
        <input type="checkbox" id="cb_1_1">1.1
        <input type="checkbox" id="cb_1_2">1.2
        <input type="checkbox" id="cb_1_3">1.3
        <input type="checkbox" class="select-all">All
    </section>
    <section id="sect_2">
        <input type="checkbox" id="cb_2_1">2.1
        <input type="checkbox" id="cb_2_2">2.2
        <input type="checkbox" id="cb_2_3">2.3
        <input type="checkbox" class="select-all">All"
    </section>
</body>
  1. セクションの「すべて」の CB をクリックすると、このセクション内の他のすべての CB がチェックされます。予想通り
  2. セクションの「すべて」の CB をもう一度クリックすると、このセクション内の他のすべての CB のチェックが外されます。予想通り
  3. セクションの「すべて」の CB をもう一度クリックしても、このセクション内のすべての CB はチェックされません。

Chrome と Firefox で調べたところ、checked="checked"それぞれの内部で属性が表示されたり消えたりするのがわかりますが、<input type="checkbox" id="cb_x_x">表示される CB には影響しません。

何か案が？

編集

重要: 上記のコードは DOM を変更します。クリックした後、.select-allがチェック#cb_x_xされると、親セクション内のすべてのタグが更新され、DOM が検査されます<input type="checkbox" id="cb_x_x" checked="checked">。

もう一度クリックしてチェックを外す.select-allと、DOM も更新されます。すべて#cb_x_xの属性が失われますchecked。

継続して何度もクリックして再チェック/再チェック解除すると、親セクション内の.select-allすべての#cb_x_xタグは引き続き更新され、checked="checked"属性は親セクション内のすべてのタグで表示/非表示を続け#cb_x_xますが、表示は更新されません: すべての#cb_x_xCB が表示されchecked="checked"たままになりますDOMの検査時に属性が追加/削除されてもチェックされません。

ここで利用可能なライブコード: http://jsbin.com/orehor/3/

4

2 に答える 2

3

jQuery 1.6 以降では、要素のプロパティを変更するためpropに の代わりにメソッドを使用するattr必要があります。また、メソッドは必要ありませんeach。jQuery はeach内部的に呼び出します。

$(function() {
   $('.select-all').change(function() {
      $(this).siblings('input[type=checkbox]').prop('checked', this.checked);
      // $(this).closest('section').find('input[type=checkbox]').prop('checked', this.checked);
   });
});
于 2013-01-30T17:23:25.807 に答える
0

修正が見つかりました：attr（）の代わりにprop（）を使用してください。JQuery1.6以降との下位互換性が失われています。http://api.jquery.com/prop/を参照してください

<script>
$(function() {
    $('.select-all').click(function() {
        $(this).closest('section').find('input:checkbox').prop('checked', $(this).is(':checked'));
    });
});
</script>
于 2013-01-31T08:54:48.910 に答える