I have problem with select all / deselect checkbox

Code Here

<input type="checkbox" value="" onclick="checkedAll();" name="checkall" id="checkall"/>

  function checkedAll() {
      $('.all span').click(function () {
       if(document.getElementById("checkall").checked == true)
       {
         $('#uniform-undefined span').addClass('checked');      
       }
       else
       {
         $('#uniform-undefined span').removeClass('checked');
       }
     });
     $.uniform.update();
   }

When I select checkbox(for all check box true) jQuery add span tag with class="checked"

     spanTag.addClass(options.checkedClass);

And no one check box are active.

<li><label><div id="uniform-undefined" class="checker">">
   <span class="checked"><input type="checkbox" value="F2" style="opacity: 0;"></span>
   </div><b>1 </b>
 </label></li>

<li><label><div id="uniform-undefined" class="checker">
   <span class="checked"><input type="checkbox" value="F2" style="opacity: 0;"></span>
   </div><b>2 </b>
</label></li>

<li><label><div id="uniform-undefined" class="checker">
    <span class="checked"><input type="checkbox" value="F3" style="opacity: 0;"></span>
    </div><b>3 </b>
</label></li>

I have problem with select all / deselect checkbox

Code Here

<input type="checkbox" value="" onclick="checkedAll();" name="checkall" id="checkall"/>

  function checkedAll() {
      $('.all span').click(function () {
       if(document.getElementById("checkall").checked == true)
       {
         $('#uniform-undefined span').addClass('checked');      
       }
       else
       {
         $('#uniform-undefined span').removeClass('checked');
       }
     });
     $.uniform.update();
   }

When I select checkbox(for all check box true) jQuery add span tag with class="checked"

     spanTag.addClass(options.checkedClass);

And no one check box are active.

<li><label><div id="uniform-undefined" class="checker">">
   <span class="checked"><input type="checkbox" value="F2" style="opacity: 0;"></span>
   </div><b>1 </b>
 </label></li>

<li><label><div id="uniform-undefined" class="checker">
   <span class="checked"><input type="checkbox" value="F2" style="opacity: 0;"></span>
   </div><b>2 </b>
</label></li>

<li><label><div id="uniform-undefined" class="checker">
    <span class="checked"><input type="checkbox" value="F3" style="opacity: 0;"></span>
    </div><b>3 </b>
</label></li>

• javascript
• jquery

• are you trying to select all with one click – Zevi Sternlicht Commented Feb 6, 2013 at 12:40
• what are you trying to do in the code ? – Nishant Jani Commented Feb 6, 2013 at 12:41
• Can you ensure the code you show is correct and has no copy-paste errors. you seem to have an additional "> in the beginning and you style=opacity: 0;" in the last set is missing a ". Just want to make sure the issue is not due to odd HTML. – Nope Commented Feb 6, 2013 at 12:43
• If you simply want to check all checkboxes, do something like: $('input[type=checkbox]').attr('checked', true); – MCL Commented Feb 6, 2013 at 12:45
• 2 A JSfiddle will be much appreciated... – William Buttlicker Commented Feb 6, 2013 at 12:47

5 Answers 5

Try this...

  $('#all').on('click', function(){
        $(':checkbox').attr("checked",$(this).is(':checked'));
  });

OR for the las version.

  $('#all').on('click', function(){
        $(':checkbox').prop("checked",$(this).is(':checked'));
  });

See this Example...

Are you aiming for something like this ?

$('document').ready(function(){
    $('#all').click(function(){
        if($(this).is(':checked')){
            $('.group').attr("checked",true);
        }
        else{
            $('.group').attr("checked",false);
        }
    })
});

See this Demo

$('document').ready(function(){
    $('#all').click(function(){
        if($(this).is(':checked')){
            $('.group').attr("checked",true);
        }
        else{
            $('.group').attr("checked",false);
        }
    })
});

this is code is correctly working for the first time only. For the second time if i click the check all check box it is not working. It only got checked.

Simplest solution call uniform.update:

        $(".all span").each(function () {
            $(this).prop("checked", document.getElementById("checkall").checked );
        });
        $.uniform.update();

<script>
$('document').ready(function(){

    $('#selectAll').click(function(){
        if($(this).is(':checked')){
            $('#uniform-undefined span').attr("class","checked");
        }
        else{
            $('#uniform-undefined span').attr("class","");
        }
    })
});
</script>