如何使用jQuery检查父母的兄弟姐妹的所有复选框 [英] How to check all checkboxes of parents' siblings on click with jQuery

问题描述

HTML

我试图找出在我的jQuery中没有工作的东西。

 < ul> 
< div class =filter-all> 
< div class =filter-select-all>全选< / div> | 
< div class =filter-select-none>选择无< / div> 
< / div> 
< li>< label>< input type =checkbox> Food< / label>< / li> 
< li>< label>< input type =checkbox>会议< / label>< / li> 
< li>< label>< input type =checkbox> Music< / label>< / li> 
< li>< label>< input type =checkbox> Outdoors< / label>< / li> 
< / ul> 
  

jQuery
< （）：$（$）$（$） '）.attr（'checked'，this.checked）;
}）;

演示： http://jsfiddle.net/MDNmx/

我试过各种不同的方法，而不是最接近的， / p>

感谢您的任何帮助：）

jsFiddle Demo

  $（function（）{
 $（'。filter-select-all'）。click（function（）{
 $（this）。 （'ul'）。find（'input [type =checkbox]'）。prop（'checked'，true）; 
}）; 
}）; 
  

更新：

仅供参考 - HTML规范说明只有< li> 应该是< ul> 的直接后代，所以你应该改变你的HTML看起来像：

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

然后您的代码将如下所示：

<$ （函数（）{
$（'。filter-select-all'）。click（function（）{
$（'＃checkboxes'）。 find（'input [type =checkbox]'）
.prop（'checked'，true）;
}）;
$（'。filter-select-none'）。 （'check'，false）;
}（$ { ）;
}）;

进一步更新：（>

filter-select-all 到 filter-select 和 all ）：

 < div class =filter-all> 
< div class =filter-select all>全选< / div> | 
< div class =filter-select none>选择无< / div> 
< / div> 
  

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

  $（function（）{
 $（'。filter-select'）。click（function（）{
 $（'＃checkboxes '）.find（'input [type =checkbox]'）
 .prop（'checked'，$（this）.is（'。all'））; 
}）; 
}）; 
  

I'm trying to figure out what's not working here in my 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);
});

Demo: http://jsfiddle.net/MDNmx/

I've tried all kinds of different methods instead of closest and find too..

Thanks for any help :)

解决方案

jsFiddle Demo

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

Update:

FYI -- the HTML specification says that only <li> should be a direct descendant of <ul>, so you should change your HTML to look like:

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

Then your code will look like:

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

Further update: (demo)

To condense the two click handlers into one, consider updating your HTML further (split filter-select-all into filter-select and all):

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

Then you can use the second class for the boolean flip:

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

这篇关于如何使用jQuery检查父母的兄弟姐妹的所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！