堆栈内存溢出
  简体   繁体   English

使用jQuery创建“全部选中” /“全部选中”复选框吗？

[英]Create “check all” / “select all” checkbox with jQuery?

 原文  2012-05-03 05:03:58  9   7    javascript/ jquery/ checkbox

问题描述

I have few checkboxes , out of which one is "Select All" and the others are some standalone's. 我没有几个复选框，其中一个是“全选”，其他是一些独立的。

The requirement is that 要求是

  1. Ifthe user click on "Select All" checkbox, then all other checkboxes will be checked. 如果用户单击“全选”复选框，则将选中所有其他复选框。
  2. If he unchecks the "Select All" checkbox , then everything will be unchecked. 如果他取消选中“全选”复选框，则所有内容都将取消选中。
  3. And if any one of the individual checkbox is unchecked, then the "Select all" will be unchecked. 如果未选中单个复选框中的任何一个，则“全选”也将被取消。
  4. If all the four check boxes are checked, then the "Select All" will be checked. 如果所有四个复选框均被选中，则将选中“全选”。

I am using JQuery. 我正在使用JQuery。 I am able to achieve the first two but not the last two. 我能够达到前两个，但不能达到最后两个。 My code is as under 我的代码如下 

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

Need help to implement the rest. 需要帮助来实施其余的工作。

Thanks 谢谢

7 个解决方案

解决方案1
 3  2012-05-03 05:24:39

$(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 Fiddle: http://jsfiddle.net/4vKwm/10/ 奇克·提德（Check Fiddle）： http : //jsfiddle.net/4vKwm/10/

解决方案2
 2  2012-05-03 05:21:17

maybe it gives some explanations 也许它给出了一些解释

Ifthe user click on "Select All" checkbox, then all other checkboxes will be checked. 如果用户单击“全选”复选框，则将选中所有其他复选框。 

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

If he unchecks the "Select All" checkbox , then everything will be unchecked. 如果他取消选中“全选”复选框，则所有内容都将取消选中。 

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

And if any one of the individual checkbox is unchecked, then the "Select all" will be unchecked. 如果未选中单个复选框中的任何一个，则“全选”也将被取消。 

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

If all the four check boxes are checked, then the "Select All" will be checked. 如果所有四个复选框均被选中，则将选中“全选”。 

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

解决方案3
 1  2012-05-03 05:22:04

Simply check the state of all checkboxes. 只需检查所有复选框的状态。

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

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

Yet another Demo that works nicely with your markup: http://jsfiddle.net/XSdjQ/3/ 另一个与您的标记配合得很好的演示： http : //jsfiddle.net/XSdjQ/3/

解决方案4
 1  2012-05-03 05:32:56

I would really recommend you to update your jQuery library and try to add a class to all the checkboxes you want to listen to, but: 我真的建议您更新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);
});

will work, I added the feature if you manually check all (or deselect one when you pushed select all) then it will toggle off the #chkSelectDeselectAll . 可以使用，如果您手动选中所有功能（或在按下“全选”时取消选择一个），则我添加了该功能，然后它将关闭#chkSelectDeselectAll 。 A demo: 演示：

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

解决方案5
 0  2012-05-03 05:24:04

You can try this code. 您可以尝试此代码。 

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

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

Thanks. 谢谢。

解决方案6
 0  2016-04-13 07:50:31

<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
 -1 已采纳  2012-05-03 05:12:38

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Jquery选中所有复选框 - Jquery Check all checkbox Jquery“全选”复选框 - Jquery “select all” checkbox jQuery选择复选框-全选 - jQuery Select Checkbox - Select All jQuery clickable未选中输入：复选框？ 选择所有复选框？ - jQuery clickable not checked input:checkbox? select all check boxes? Django复选框通过jQuery全选 - django checkbox select all by jquery jQuery选择带有toggleClass的所有复选框 - jQuery Select All Checkbox with toggleClass 全选并取消选中带有jQuery的复选框 - select all and unselect checkbox with jquery 在多个列表中选中复选框时，选择所有复选框 - Select All checkboxes on check of checkbox in multiple lists 检查是否已选中“全选”复选框 - check if select all checkbox has been clicked 如何使用jquery检查所有复选框？ - how to make a check all checkbox using jquery?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM