CODEWITHSUNDEEP
jquery
Vicky
Vicky

Reputation: 9575

Jquery checkbox

All One Two three

My requirement is

  1. when check All it should check One , Two, Three also.
  2. When i uncheck All it should uncheck One , Two, Three also
  3. When all check boxes check and uncheck either one , two , three in that case "All" check box should uncheck.
  4. check / uncheck should ne toggling

Please help

Upvotes: 0

Views: 654

Answers (3)

Jamie Ide
Jamie Ide

Reputation: 49291

This solution uses a cb class selector on the "child" textboxes. Another solution would be to select all those that don't have an id=all. It compares the length of the set of checked child checkboxes with the length of the set of all child checkboxes to determine if all should be checked. 

<script type="text/javascript">
    $(document).ready(function() {
        $('#all').click(function() {
            $('.cb').attr('checked', this.checked);
        });
        $('.cb').click(function() {
            var allChecked = $('.cb:checked').length == $('.cb').length;
            $('#all').attr('checked', allChecked);
        });
    });
</script>

<input type="checkbox" name="checkGroup" id="all" value="0" />All
<input type="checkbox" name="checkGroup" id="one" class="cb" value="1" />One
<input type="checkbox" name="checkGroup" id="two" class="cb" value="2" />Two
<input type="checkbox" name="checkGroup" id="three" class="cb" value="3" />Three

Upvotes: 0

rahul
rahul

Reputation: 187110

$(function(){
    $("#all").click(function(){
        $("input:checkbox[name='checkGroup']").attr("checked",$(this).attr("checked"));
    });

    $("input:checkbox[name='checkGroup']:not('#all')").click ( function(){
        var totalCheckboxes = $("input:checkbox[name='checkGroup']:not('#all')").length;
        var checkedCheckboxes = $("input:checkbox[name='checkGroup']:not('#all'):checked").length;

        if ( totalCheckboxes === checkedCheckboxes )
        {
            $("#all").attr("checked" , true );
        }
        else
        {
            $("#all").attr("checked" , false );
        }
    });
});

Demo

Upvotes: 2

tree em
tree em

Reputation: 21771

What is your trying?

Let's try

<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="Javascript" type="text/javascript">
$(document).ready(function() {
   $("#toggle5").click(function(event){
      $('input[@type=checkbox]').each( function() {
        if($(this).val()==5)
          this.checked = !this.checked;
      });
   });
});
</script>

<a href="#" id="toggle5">Toggle 5ve</a>

<form method="post" action="" style="margin:0px">
<input type="checkbox" name="a" value="1" id="" />
<input type="checkbox" name="b" value="2" id="" />
<input type="checkbox" name="c" value="3" id="" />
<input type="checkbox" name="d" value="4" id="" />
<input type="checkbox" name="e" value="5" id="" />
<input type="checkbox" name="f" value="5" id="" />
</form>

Upvotes: 0

Related Questions