Create "check all" / "select all" checkbox with jQuery?

javascript jquery checkbox

12,558

Solution 1

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>

Solution 2

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

Solution 3

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

Solution 4

Simply check the state of all checkboxes.

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

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

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

Solution 5

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:

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.net/voigtan/yTWKY/1/

View more solutions

12,558

Author by

Admin

Updated on June 05, 2022

Comments

Admin almost 2 years

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