添加选中全部并取消选中复选框内的所有选项

我正在尝试创建一个全选，取消选择所有选项，就像我们在电子邮件收件箱中看到的一组复选框。 我已经为此添加了一个示例。 我试图得到的工作模型是当我点击复选框时，它应该选择并取消选择具有特定值的组。 即使我们取消选中列表中的任何单个名称，也应该取消选中主“全选”复选框。 我已经添加了一个jsfiddle，但它不能正常工作。

$(document).ready(function(){
    $("#selectAll").live("click",function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        var clickedValue=$(this).attr('class');
        clickedValue=clickedValue.replace("select", "");
        $("#modalEntity").attr("value", "group"+ clickedValue).attr("checked", true);      
    });
});

http://jsfiddle.net/EBxSu/

---

我更新了代码，删除了多个ID并处理了所请求的各种场景（如果用户选择了某个子项，请清除全选复选框）。 还使用.on（）而不是.live（）更新了您的jQuery。

jQuery看起来像：

$(function(){
  $('.selectAll').on('click', function(evt){
    var group = $(this).attr('data-group'),
        isChecked = !!($(this).prop('checked'));
    $('input[value="' + group + '"]').prop('checked', isChecked);    
  })

  $('.entity').on('click', function(evt){
    var group = $(this).attr('value'),
        siblings = $('input[value="' + group + '"]'),
        isChecked = true;
    siblings.each(function(idx, el){
      if(!$(el).prop('checked')) {
        isChecked = false;
        return;
      }
    })
    $('.selectAll[data-group="' + group + '"]').prop('checked', isChecked);
  })
})

并更新了HTML：

<ul>
<li>
Country
<ul>
<input type="checkbox" class="selectAll" data-group="group1">Select/Deselect All Country
<li>
<input class="entity" type="checkbox" value="group1" name="India">India
<input class="entity" type="checkbox" value="group1" name="UAE">UAE
...
</ul>
</li>
</ul>

这里是小提琴：http://jsfiddle.net/nBh4L/2/

谢谢！ 插口

---

更新 （改变生活上和一些重命名）

首先，你不应该有像这样的具有相同ID的元素：

<input id="modalEntity" class="entity1" type="checkbox" value="group1" name="India">India
<input id="modalEntity" class="entity2" type="checkbox" value="group1" name="UAE">UAE

我重写了这个jQuery代码：

    $(document).ready(function() {
    "use strict";
    $("input.select").on("click", function() {
        $(this).siblings().find("input.entity").prop("checked", $(this).is(":checked"));
    });

    $("input.entity").on("click", function() {
        var $entityGroup = $(this).siblings().andSelf();
        $(this).parent().siblings("input.select").prop("checked", $entityGroup.length === $entityGroup.filter(":checked").length);
    });
});

.prop（）只能用于jQuery 1.6及更高版本。

我也重写了一下HTML，看看这里更新的jsFiddle：http://jsfiddle.net/sQVe/EBxSu/8/

只是评论一下，如果我错过了一些东西，但我认为这是你所追求的。

---

我只为国家做过。 HTML：

<ul>
<li>
Country
<ul>
<input type="checkbox" id="selectAll" class="select1">Select/Deselect All Country
<li>
<input class="entity1 countries" type="checkbox" value="group1" name="India">India
<input class="entity2 countries" type="checkbox" value="group1" name="UAE">UAE
</li>
</ul>
</li>
<li>​

JavaScript的：

$(document).ready(function(){
$("#selectAll").click(function(){
    if(!$('.countries').attr('checked'))
        $('.countries').attr('checked','checked');
    else
        $('.countries').removeAttr('checked');
});
$('.countries').click(function(){
    var allChecked = true;
    $('.countries').each(function(index, element){
       if(!$(element).attr('checked'))
           allChecked = false;
    });
    if(!allChecked)
        $("#selectAll").removeAttr('checked');        
    else
        $("#selectAll").attr('checked','checked');         
});
});​

链接地址: http://www.djcxy.com/p/55999.html

上一篇: adding check all and uncheck all option using value inside checkbox

下一篇: jQuery: check if checkboxes are checked