Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
     
 <input type="checkbox" id="chkAll" name="chkAll">Select all<br><br>
 <input type="checkbox" name="bike" value="Bike">I have a bike<br>
 <input type="checkbox" name="car" value="Car">I have a car<br>
 <input type="checkbox" name="train" value="Train">I have a train<br>
 <input type="checkbox" name="jet" value="Jet">I have a jet<br>
 <input type="checkbox" name="balloon" value="Balloon">I have a balloon<br>
 
    $(document).ready(function () {
      
      var allCheckBoxSelector = $('#chkAll');
      var checkBoxSelector = $('input:checkbox:not(#chkAll)');
    function ToggleCheckUncheckAllOptionAsNeeded()
    {   
        var totalCheckboxes = $(checkBoxSelector),       
            checkedCheckboxes = totalCheckboxes.filter(":checked"),
            noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
            allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);
      
       //console.log(allCheckboxesAreChecked);
      $(allCheckBoxSelector).prop('checked', allCheckboxesAreChecked);
    }
      $(allCheckBoxSelector).on('click', function ()
      {
          $(checkBoxSelector).prop('checked', $(this).is(':checked'));
          ToggleCheckUncheckAllOptionAsNeeded();
      });
      $(checkBoxSelector).on('click', function()
      {
        ToggleCheckUncheckAllOptionAsNeeded();
      });
    });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lenielpro
0viewers