jquery - 如何使用 jQuery 点击时检查父母兄弟姐妹的所有复选框

Question

我试图弄清楚我的 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/

我尝试了各种不同的方法，而不是最接近的方法，也找到了..

谢谢你的帮助 ：）

Answer 1

jsFiddle 演示

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

更新：

仅供参考——HTML 规范说 only<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);
    });
});

进一步更新：（演示）

要将两个点击处理程序合并为一个，请考虑进一步更新您的 HTML（拆分filter-select-all为filter-select和all）：

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

然后你可以使用第二个类进行布尔翻转：

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

Answer 2

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);
   });
   

Answer 3

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; }); });

Answer 4

$('.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);
});

Answer 5

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