用jQuery创建“全选”/“全选”复选框？答案

【问题标题】：Create "check all" / "select all" checkbox with jQuery?用jQuery创建“全选”/“全选”复选框？
【发布时间】：2012-05-03 05:03:58
【问题描述】：

我有几个复选框，其中一个是“全选”，其他的是一些独立的。

要求是

如果用户点击“全选”复选框，则所有其他复选框都将被选中。
如果他取消选中“全选”复选框，那么所有内容都将被取消选中。
如果单个复选框中的任何一个未选中，则“全选”将被取消选中。
如果四个复选框都被选中，那么“全选”将被选中。

我正在使用 JQuery。我能够实现前两个，但不能实现后两个。我的代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Check / UnCheck All Checkbox </TITLE> 

  <script  type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">

  function SelectDeselect()
  {
        if(document.getElementById('chkSelectDeselectAll').checked)  $("INPUT[type='checkbox']").attr('checked',true); 

        else  $("INPUT[type='checkbox']").attr('checked',false); 
  }

  </script>

 </HEAD>

 <BODY>


    <input type="checkbox" id="chkSelectDeselectAll" onClick="SelectDeselect()">Select All
    <br><br>

    Select your hobbies:
    <br><br>

    <input type="checkbox" id="chkTV">Watching T.V.<br><br>

    <input type="checkbox" id="chkGardening">Gardening<br><br>

    <input type="checkbox" id="chkSwimming">Swimming<br><br>

    <input type="checkbox" id="chkChess">Playing Chess<br><br>

 </BODY>
</HTML>

需要帮助来实现其余部分。

谢谢

【问题讨论】：

你用的是什么版本的jQuery？并将 javascript click 与 jQuery 绑定，而不是将其添加到 HTML 标记中
有点老（1.2.6）。先生，我对JQuery不是很精通。刚开始学习，因为我们在当前项目中实现
1.2.6 不是“旧”...它是古老的 :(

标签： javascript jquery checkbox

【解决方案1】：

$(document).ready(function() {

    $('#main').change(function() {

        if ($(this).is(':checked')) {
        $('input[name="hi[]"]:checkbox').attr('checked', true);        

        } else {

            $('input[name="hi[]"]:checkbox').attr('checked', false);
        }
    });


$('input[name="hi[]"]:checkbox').change(function() {
        var chkLength = $('input[name="hi[]"]:checkbox').length;
        var checkedLen = $('input[name="hi[]"]:checkbox:checked').length;    
        if (chkLength == checkedLen) {
            $('#main').attr('checked', true);
        } else {
            $('#main').attr('checked', false);
        }
    });
});

检查小提琴：http://jsfiddle.net/4vKwm/10/

【讨论】：

【解决方案2】：

也许它给出了一些解释

如果用户点击“全选”复选框，那么所有其他复选框都会被选中。

    $("#chkSelectDeselectAll").click(function(){  
     if($("#chkSelectDeselectAll").is(':checked'))
{
        ("checkbox").each(function(){
            $(this).attr('checked', 'checked');
          });
}
    });

如果他取消选中“全选”复选框，那么所有内容都将被取消选中。

$("#chkSelectDeselectAll").click(function(){  
     if(!$("#chkSelectDeselectAll").is(':checked'))
{
    ("checkbox").each(function(){
            $(this).removeAttr('checked');
          });
    }
});

如果单个复选框中的任何一个未选中，则“全选”将被取消选中。

$("checkbox").click(function(){
    ("checkbox").each(function(){
    if($(this).is(':checked'))
    {
            $("#chkSelectDeselectAll").removeAttr('checked');
    }
          });
     });

如果四个复选框都被选中，那么“全选”将被选中。

$("checkbox").click(function(){
    ("checkbox").each(function(){
    var yesno=true;
    if(!$(this).is(':checked'))
    {
            yesno=false;
    }
          });
    if( yesno)
    {
     $("#chkSelectDeselectAll").attr('checked', 'checked')
    }
  });

【讨论】：

【解决方案3】：

我真的建议你更新你的 jQuery 库并尝试为你想听的所有复选框添加一个类，但是：

var collection = $("input:checkbox:not(#chkSelectDeselectAll)").change(function() {
    selectAll[0].checked = collection.filter(":not(:checked)").length === 0;
});
var selectAll = $("#chkSelectDeselectAll").change(function(){
    collection.attr('checked', this.checked);
});

会起作用，如果您手动检查所有（或在您按下全选时取消选择一个），我添加了该功能，然后它将关闭#chkSelectDeselectAll。一个演示：

http://jsfiddle.net/voigtan/yTWKY/1/

【讨论】：

【解决方案4】：

只需检查所有复选框的状态。

~~工作演示：http://jsfiddle.net/XSdjQ/1/~~

~~更新的演示：http://jsfiddle.net/XSdjQ/2/~~

另一个与您的标记完美配合的演示：http://jsfiddle.net/XSdjQ/3/

【讨论】：

【解决方案5】：

你可以试试这个代码。

$(document).ready(function(){
    $('#chkSelectDeselectAll').toggle(function(){
                $('input[type=checkbox]').each(function(){
                    $(this).attr('checked',true);
                });

    },function(){
                $('input[type=checkbox]').each(function(){
                    $(this).removeAttr('checked');
                });
    })
});

谢谢。

【讨论】：

【解决方案6】：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    

<script type="text/javascript">
        $(function () {
            $("[id*=chkAll]").bind("click", function () {
                if ($(this).is(":checked")) {
                    $("[id*=chkvalue] input").attr("checked", "checked");
                } else {
                    $("[id*=chkvalue] input").removeAttr("checked");
                }
            });
            $("[id*=chkvalue] input").bind("click", function () {
                if ($("[id*=chkvalue] input:checked").length == $("[id*=chkvalue] input").length) {
                    $("[id*=chkAll]").attr("checked", "checked");
                } else {
                    $("[id*=chkAll]").removeAttr("checked");
                }
            });
        });
</script>



<asp:CheckBox ID="chkAll" Text="Select All Test Patterns" runat="server" />

 <asp:CheckBoxList ID="chkvalue" runat="server">
  <asp:ListItem Text="On/Off" />
  <asp:ListItem Text="Alternate Rows" />
  <asp:ListItem Text="Alternate Columns" />
  <asp:ListItem Text="Alternate Diagonals" />
  <asp:ListItem Text="Running Row" />
  <asp:ListItem Text="Running Columns" />
</asp:CheckBoxList>

【讨论】：

【解决方案7】：

function checkOne(){
    if(    document.getElementById('chkTV').checked &&
          document.getElementById('chkGardening').checked &&
    document.getElementById('chkSwimming').checked &&
    document.getElementById('chkChess').checked ){
         document.getElementById('chkSelectDeselectAll').checked = true;
    }
    else{
         document.getElementById('chkSelectDeselectAll').checked = false;
    }

  }



    <input type="checkbox" id="chkTV" onclick="checkOne">Watching T.V.<br><br>

    <input type="checkbox" id="chkGardening" onclick="checkOne">Gardening<br><br>

    <input type="checkbox" id="chkSwimming" onclick="checkOne">Swimming<br><br>

    <input type="checkbox" id="chkChess" onclick="checkOne">Playing Chess<br><br>

【讨论】：

答案应该更通用。如果有“n”个复选框，那将不方便。你不能像那样把所有的复选框都放在 IF 语句中！