javascript - 使用复选框内的值添加全选并取消选中所有选项

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 & 一些重命名）

首先，你不应该像这样拥有具有相同 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，具有child值。然后保持该组的选择器/取消选择器具有相同的名称，但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 fiddle：

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

我希望你指出一些你做错的事情，也许它会帮助你：

• 您错误地使用了 HTML“id”和 class“属性。ID 应该是唯一的。类不必是唯一的 - 我为您切换了它们。
• 除非您不希望选中该复选框，否则您无需阻止默认设置。
• 您在标签中有一个 with 文本 - 这是无效的。仅有的
• 可以存在于标签中 - 所以我将它移出
• 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 进行演示

这是演示中使用的 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>

查询：

$(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/

更多帮助和链接：
检查是否使用 jQuery 选中复选框 使用 jQuery
设置“选中”复选框？

Answer 9

由于您两次使用相同的 ID，我已经稍微修改了您的 HTML ...下面是工作脚本...

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

    });
 });​