1

ここで私のjQueryで何が機能していないのかを理解しようとしています..

HTML

<ul>
    <div class="filter-all">
        <div class="filter-select-all">Select All</div> | 
        <div class="filter-select-none">Select None</div>
    </div>
    <li><label><input type="checkbox">Food</label></li>
    <li><label><input type="checkbox">Meeting</label></li>
    <li><label><input type="checkbox">Music</label></li>
    <li><label><input type="checkbox">Outdoors</label></li>
</ul>

jQuery

$('.filter-select-all').click(function() {
     $(this).closest('ul').find(':checkbox').attr('checked', this.checked);
});

デモ: http://jsfiddle.net/MDNmx/

私は最も近いのではなく、あらゆる種類の異なる方法を試しました..

助けてくれてありがとう:)

4

5 に答える 5

3

jsFiddle デモ

$(function() {
    $('.filter-select-all').click(function() {
         $(this).closest('ul').find('input[type="checkbox"]').prop('checked', true);
    });
});

アップデート：

参考までに -- HTML 仕様では、<li>は の直接の子孫である必要があると規定されている<ul>ため、HTML を次のように変更する必要があります。

<div class="filter-all">
    ...
</div>
<ul id='checkboxes'> ... </ul>

次に、コードは次のようになります。

$(function () {
    $('.filter-select-all').click(function () {
        $('#checkboxes').find('input[type="checkbox"]')
            .prop('checked', true);
    });
    $('.filter-select-none').click(function () {
        $('#checkboxes').find('input[type="checkbox"]')
            .prop('checked', false);
    });
});

さらに更新: (デモ)

2 つのクリック ハンドラーを 1 つにまとめるには、HTML をさらに更新することを検討してください (とfilter-select-allに分割)。filter-selectall

<div class="filter-all">
    <div class="filter-select all">Select All</div>|
    <div class="filter-select none">Select None</div>
</div>

次に、ブール値の反転に 2 番目のクラスを使用できます。

$(function () {
    $('.filter-select').click(function () {
        $('#checkboxes').find('input[type="checkbox"]')
        .prop('checked', $(this).is('.all'));
    });
});
于 2013-03-11T03:39:11.680 に答える
1
  1. div要素にはプロパティがありませんchecked。つまり、this.checked === 'undefined'
  2. マークアップが無効です。要素を要素divの直接の子にすることはできませんul。

  3. 要素のプロパティを変更するには、 のprop代わりに を使用する必要がありattrます。

    $('.filter-select-all').click(function() {
    $(this).closest('ul').find('input[type=checkbox]').prop('checked', true);
});
于 2013-03-11T03:39:43.207 に答える
0

  1. 各チェックボックスに「クラス」属性を追加します。

    < li>< label>< input class='check' type="checkbox">食べ物</label></li>

  2. 次のようにJavaScriptを記述します。

$('.filter-select-all').click(function() { $('.check').each(function(k,v) { v.checked = true; }); });

$('.filter-select-none').click(function() { $('.check').each(function(k,v) { v.checked = false; }); });

于 2013-03-11T03:41:38.047 に答える
0 
$('.filter-select-all').click(function() {
    $(this).closest('ul').find('input:checkbox').prop('checked', true);
});
于 2013-03-11T03:43:38.530 に答える
0 
$('.filter-select-all').click(function() {
  $(this).parent().siblings('li').children().find('input[type="checkbox"]').prop("checked",true);
});
$('.filter-select-none').click(function() {
  $(this).parent().siblings('li').children().find('input[type="checkbox"]').prop("checked",false);
});
于 2013-03-11T03:43:18.697 に答える