javascript - 用jQuery创建“全选”/“全选”复选框？

Question

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

要求是

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

我正在使用 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>

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

谢谢

score 3 · Accepted Answer

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

score 2 · Accepted Answer

也许它给出了一些解释

如果用户单击“全选”复选框，则将选中所有其他复选框。

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

score 1 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

我真的建议您更新您的 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/

score 0 · Accepted Answer

你可以试试这段代码。

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

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

谢谢。

score 0 · Accepted Answer

<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>

score -1 · Accepted Answer

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>

javascript - 用jQuery创建“全选”/“全选”复选框？

7 回答 7

Related

Reference