如何使用jQuery在单击时选中父母兄弟姐妹的所有复选框

我正试图找出我的jQuery中有什么不起作用

HTML

演示：

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

感谢您的帮助：

更新： 仅供参考-HTML规范指出，only应该是的直接后代，因此您应该将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，进一步拆分过滤器，将所有选择为过滤器选择和全部：

更新： 仅供参考-HTML规范指出，only应该是的直接后代，因此您应该将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，进一步拆分过滤器，将所有选择为过滤器选择和全部：

div元素没有checked属性，即this.checked==“未定义” 您的标记无效，div元素不应是ul元素的直接子元素。 要更改元素的属性，应使用prop而不是attr

div元素没有checked属性，即this.checked==“未定义” 您的标记无效，div元素不应是ul元素的直接子元素。 要更改元素的属性，应使用prop而不是attr

在每个复选框上添加类属性：

食品

按如下方式编写javascript：

$”。过滤器全选。单击函数{ $'.check'.eachfunctionk，v{ v、 选中=正确； }; };

$”。过滤器选择无。单击函数{ $'.check'.eachfunctionk，v{ v、 选中=错误； }; };

在每个复选框上添加类属性：

食品

按如下方式编写javascript：

$”。过滤器全选。单击函数{ $'.check'.eachfunctionk，v{ v、 选中=正确； }; };

$”。过滤器选择无。单击函数{ $'.check'.eachfunctionk，v{ v、 选中=错误； }; };

---

div元素没有checked属性@未定义这意味着什么？div元素没有checked属性@未定义这意味着什么？不应该。查找“：checkbox”只针对复选框？@Reuben速度会慢一些，您可以使用输入：checkboxthough@Reuben是的，是这样的。但在您的代码中，这指的是单击的元素而不是复选框。@未定义我想您是指这个。已选中===未定义。这对于ya:PShouldn't来说是非常棘手的严格相等比较。但是查找“：checkbox”只针对复选框？@Reuben速度会慢一些，您可以使用input:checkboxthough@Reuben是的，是这样的。但在您的代码中，这指的是单击的元素而不是复选框。@未定义我想您是指这个。已选中===未定义。对你来说，这就是棘手的严格平等比较：呜呜！谢谢你的快速回答！这么快，它甚至还不让我接受……呜呜！谢谢你的快速回答！这么快，它甚至还不让我接受。。

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

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

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

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

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