Question

我正在尝试创建一个全选，取消选中所有选项，就像我们在电子邮件收件箱中看到的一组复选框一样。我为此添加了一个示例。我想要获得的工作模型是当我单击复选框时，它应该选择并取消选择具有特定值的组。即使我们从列表中取消选中任何单个名称，也应取消选中主“全选”复选框。我添加了一个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/

Answer 1

更新（更改为on＆amp; some renaming ）

首先，你永远不应该有像这样的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/

如果我遗漏了某些内容，请发表评论，但我认为这就是你所追求的目标。

Answer 2

我不明白你的解决方案，但这是一个。首先，保留具有共同属性的类似按钮组，例如relation，其值为子。然后保持该组的选择器/取消选择器具有相同的名称，但relation属性的值设置为 parent 。现在你必须

1.切换母亲状态时所有类似子复选框的状态：

$("[relation=parent]").change(function() {
 name = $(this).prop('name');
  $("[relation=child][name="+name+"]").attr('checked',$(this).attr('checked'));
});

2.当孩子的状态被切换时，相应地切换母亲的状态：

$("[relation=parent]").change(function() {
 name = $(this).attr('name');
 $("[relation=child][name="+name+"]").attr('checked',$(this).attr('checked'));
});
$("[relation=child]").change(function() {
 name = $(this).attr('name');
 if ($(this).attr('checked') == false) {
   $("[relation=parent][name="+name+"]").attr('checked',false);
  }
 else {
   if ($("[name="+name+"][relation=child]:checked").length == $("[name="+name+"][relation=child]").length) {
     $("[name="+name+"][relation=parent]").attr('checked','true');
    }
   }
  });

Answer 3

我只为国家做过。 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');         
});
});

Answer 4

我更新了你的代码，删除了多个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/

谢谢！千斤顶

Answer 5

我用更正确的解决方案更新了你的JS小提琴：

http://jsfiddle.net/EBxSu/2/

有一些事情我希望你指出你做错了，也许它会帮助你解决这个问题：

你使用HTML“id”和类“属性错误.ID应该是唯一的。类不必是唯一的 - 我为你换了它们。
除非您不想选中复选框，否则无需阻止默认设置。
您在标记内部有文字 - 这是无效的。只有
可以存在于标签内 - 所以我将其移出了
jQuery不应该复杂。它可以很简单。我把HTML移动了一下（查看链接）。

您的javascript代码现在只是：

$(document).ready(function() {
    $(".selectAll").click(function(e) {
        $(this).siblings('ul').find('input').attr('checked', $(this).is(":checked"));
    });
});

Answer 6

ID是每页唯一的，但忽略了代码中的一些标记问题，我编辑了它，因此它可以按照您的意图运行。 http://jsfiddle.net/xYWWM/5/

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

}）;

Answer 7

请遵循本教程

http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/

另外，请查看 Fiddle for Demo

以下是演示中使用的HTML

<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

以下是演示的jQuery

$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});

Answer 8

在编写代码时，您应该注意几件事 1.保持简单 2.多次使用id次 3.写一个HTML代码。嵌套<ul><inputl><li>不是一个好主意。

这是一个简化的解决方案，希望您能够理解并能够在以后的不同情况下实施。

HTML：

<input type="checkbox" id="btn-select-all-1">Select/un-select All
<ul>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
</ul>

Jquery的：

$(document).ready(function(){

    var btnSelectAll = $("#btn-select-all-1");
    var toSelect = $('.select1')

     //monitor the select_all checkbox for changes
     //and take appropriate action
    btnSelectAll.on('click', function(){
        if(btnSelectAll.is(":checked")){
          toSelect.attr("checked", "checked");
        }else{
          toSelect.removeAttr("checked");
        }
      });

});

jsFiddle：http://jsfiddle.net/U8aFU/

更多帮助和链接：
Check if checkbox is checked with jQuery
Setting "checked" for a checkbox with jQuery?

Answer 9

我已经稍微修改了你的HTML，因为你曾两次使用相同的ID ......下面是工作脚本...

<ul><li>
Country
<ul>
<input type="checkbox" id="selectAll1" class="selectAll">Select/Deselect All Country
<li>
<input id="modalEntity1" class="entity" type="checkbox" value="group1"   name="India">India
<input id="modalEntity2" class="entity" type="checkbox" value="group1" name="UAE">UAE
</li>
</ul>
</li>

<li>Company<ul>
<input type="checkbox" id="selectAll2" class='selectAll'>Select/Deselect All Company</a>
<li>
<input id="modalEntity3" class="entity" type="checkbox" value="group2" name="Apple">Apple
<input id="modalEntity4" class="entity" type="checkbox" value="group2" name="Google">Google
</li>
</ul>
</li>
</ul>

jQuery的：

$(document).ready(function(){
  $('.selectAll').click(function(){
  var thisStatus = $(this).attr('checked');
    if(thisStatus=='checked'){        
       $(this).parent('ul').find('input[type="checkbox"]').attr('checked','checked');
    }
    else{
       $(this).parent('ul').find('input[type="checkbox"]').attr('checked',false);
    }
});

$('input.entity').click(function(){
var thisStatus = $(this).attr('checked');
    if(thisStatus!=='checked'){
       $(this).parent().parent('ul').find('input.selectAll').attr('checked',false);
    }
    else{
        $("input.entity:checked").each(function(){
        $(this).parent().parent('ul').find('input.selectAll').attr('checked','checked');   
    });
    }

    });
 });

添加全部检查并使用复选框内的值取消选中所有选项

9 个答案: