Checkbox checkall/uncheckall (Quick help)

Question

I wanted a check/uncheck all button using jquery or javascript. I have tried using examples available in net, but nothing worked for me.

<li>
    <span class="checkbox unchecked">
          <label for="check1"></label>
          <input type="checkbox" id="select" name="select">
    </span>
</li>

This is how I have place all my checkboxes in loop containing some information. I have called this from another jsp page and place it in a form in another. I tried possible examples but could not get working these code.

Please help.

I have tried this jQuery:

<script language="javascript">
$(function(){
    $("#select").click(function () {
        $('#check1').attr('checked', this.checked);
    });
    // if all checkbox are selected, check the select checkbox
    // and viceversa
    $("#check1").click(function(){
        if($("#check1").length == $("#check1:checked").length) {
            $("#select").attr("checked", "checked");
        } else {
            $("#select").removeAttr("checked");
        }

    });
});
</script>

I am not allowed to change the design and css of this checkbox.

Answer 1

I think you need this, insted of using id please use class please put the script in head part of your page

<script>
    $(document).ready(function(){
        $(".check").click(function(){
             if($(".checkall:checked").length<=0) {
                 $(".checkall").prop('checked', true);
             } else {
                 $(".checkall").removeAttr("checked");
             }

          });
         });

</script>

and html part would be

<ul>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
</ul>
<input type="button" name="test" value="test" class='check'/>

Answer 2

<a rel="env" href="#select_all">Select All</a>
<a rel="env" href="#select_none">Select None</a>    

<ul id="env">
    <input type="checkbox"> data
    <input type="checkbox"> data
</ul>

<script>
    $("A[href='#select_all']").click( function() {
        $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', true);
        return false;
    });

    $("A[href='#select_none']").click( function() {
        $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', false);
        return false;
    });
</script>

Answer 3

some of the flaws that is there in your code

1) Selector is wrong $("#selectall").click(function () { this select the input with id selectall but in your case there is no element with ID selectall

this should do..

 $("#select").click(function () { //this select the input with id select..which is selectall in your case..

2) $('#check1').attr('checked', this.checked); this finds the checkbox with ID check1... which i guess in your case is multiple .. so since multiple element cannot have same ID.. change it to class and call

 $('.check1').attr('checked', this.checked); 

final output..without changing must of your code

 $(function(){
     $("#select").click(function () {
          $('.check1').attr('checked', this.checked);
     });

     // if all checkbox are selected, check the selectall checkbox
     // and viceversa
     $(".check1").click(function(){
         if($(".check1").length == $(".check1:checked").length) {
             $("#select").attr("checked", "checked");
         } else {
             $("#select").removeAttr("checked");
         }

      });
  });

Answer 4

You cannot give same id to multiple elems on page. Try changing those id to class :

I have made a fiddle here: http://jsfiddle.net/zqPXc/

html used:

<ul>
<li> <span class="checkbox unchecked">
      <label for="selectall">selectall</label>
    <input type="checkbox"  name="select"/>
</span>

</li>
<li> <span class="checkbox unchecked">
      <label for="check1"></label>
    <input type="checkbox" class="check1" name="b"/>
</span>

</li>
<li> <span class="checkbox unchecked">
      <label for="check1"></label>
    <input type="checkbox" class="check1" name="b"/>
</span>

</li>
</ul>

jQuery used:

$(document).on('click', '[name="select"]', function () {
  $('.check1').prop('checked', ($('[name="select"]:checked').length) ? true : false);
});

$(document).on('click', ".check1", function () {
   $('[name="select"]').prop("checked", ($('.check1:checked').length == $('.check1').length) ? true : false);
});

Answer 5

I've written a blog post about toggling checkboxes using jQuery here blog link .

Something along these lines could apply in your case. I also noticed that you've named your checkboxes #checked1 which you might want to change to a class instead of you're going to have multiple.

$(document).ready(function() {
    /** Toggle child checkboxes based on the #selectall's checked state. */
    $("#selectall").click(function() {
        this.checked = !(this.checked == true);
        var ischecked = !(this.checked == true);

        /** Set the checkboxes. */
        $("#grdWhatever input:checkbox").attr("checked", function() {
            this.checked = ischecked;
        });
    });
});

Answer 6

Provided that you have one master checkbox #select which controls the state of all other checkboxes on the page:

$('#select').on('click', function(){
    if(this.checked) $('input:checkbox').not($(this)).attr('checked', true);
    else $('input:checkbox').not($(this)).attr('checked', false);
});