javascript - Create "check all""select all" checkbox with jQuery? - Stack Overflow

IT技术

更新时间：2025-03-080

admin管理员组
文章数量:1289542

I have few checkboxes , out of which one is "Select All" and the others are some standalone's.

The requirement is that

Ifthe user click on "Select All" checkbox, then all other checkboxes will be checked.
If he unchecks the "Select All" checkbox , then everything will be unchecked.
And if any one of the individual checkbox is unchecked, then the "Select all" will be unchecked.
If all the four check boxes are checked, then the "Select All" will be checked.

I am using 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

I have few checkboxes , out of which one is "Select All" and the others are some standalone's.

The requirement is that

Ifthe user click on "Select All" checkbox, then all other checkboxes will be checked.
If he unchecks the "Select All" checkbox , then everything will be unchecked.
And if any one of the individual checkbox is unchecked, then the "Select all" will be unchecked.
If all the four check boxes are checked, then the "Select All" will be checked.

I am using 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

Share Improve this question edited May 3, 2012 at 5:14 asked May 3, 2012 at 5:03 user1323981

1 what version are you using of jQuery? and bind javascript click with jQuery rather then add it in the HTML markup – voigtan Commented May 3, 2012 at 5:08
a bit older(1.2.6).Sir I am not very proficient in JQuery.Just started learning because we r implementing in the current project – user1323981 Commented May 3, 2012 at 5:09
3 1.2.6 is not "old" ... it's ancient :( – user166390 Commented May 3, 2012 at 5:15

Add a ment |

7 Answers 7

Sorted by: Reset to default 3

$(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/4vKwm/10/

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

I would really remend you to update your jQuery library and try to add a class to all the checkboxes you want to listen to, but:

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. A demo:

http://jsfiddle/voigtan/yTWKY/1/

Simply check the state of all checkboxes.

~~Working Demo: http://jsfiddle/XSdjQ/1/~~

~~Updated Demo: http://jsfiddle/XSdjQ/2/~~

Yet another Demo that works nicely with your markup: http://jsfiddle/XSdjQ/3/

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.

<script type="text/javascript" src="http://ajax.googleapis./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>

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>

本文标签： javascriptCreate quotcheck allquotquotselect allquot checkbox with jQueryStack Overflow

版权声明：本文标题：javascript - Create "check all""select all" checkbox with jQuery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1741439508a2378831.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Create "check all""select all" checkbox with jQuery? - Stack Overflow

7 Answers 7

更多相关文章