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 Demo

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

进一步更新：（demo）

要将两个点击处理程序压缩为一个，请考虑进一步更新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

div元素没有checked属性，即this.checked === 'undefined'
您的标记无效，div元素不应该是ul元素的直接子元素。

要更改元素prop的属性，应使用attr代替。

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

Answer 3

在每个复选框上添加“class”属性：

＆LT;立GT;＆LT;标签＆gt;＆LT;输入 class ='check' type =“checkbox”＆gt;食物＆lt; /标签＆gt;＆LT; /立GT;
按如下方式编写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);
});

如何使用jQuery单击查看父母兄弟姐妹的所有复选框

5 个答案:

jsFiddle Demo

更新：

进一步更新：（demo）