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>

需要帮助来实施其余的工作。

由于

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

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

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

Answer 3

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

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

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

另一个与你的标记很好地结合的演示：http://jsfiddle.net/XSdjQ/3/

Answer 4

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

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

感谢。

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

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

创建＆＃34;检查所有＆＃34; /＆＃34;全选＆＃34;用jQuery复选框？

7 个答案: