CODEWITHSUNDEEP
jqueryhtmlcheckbox
Benny
Benny

Reputation: 531

Check other checkboxes when check one box

I have a checkbox in my page. When I check it, other check boxes should be checked. And when I uncheck it, all the other check boxes should be unchecked too. How can I do this using jQuery? Or is simple HTML is enough?FIDDLE

    <div>Select All<input type="checkbox" checked="true"></div> 
    1.<input type="checkbox"> 
    2.<input type="checkbox"> 
    3.<input type="checkbox"> 
    4.<input type="checkbox"> 
    5.<input type="checkbox">

Upvotes: 6

Views: 21670

Answers (6)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

<div>Select All<input type="checkbox" id="parent" /></div> 
  1.<input type="checkbox" class="child"> 
  2.<input type="checkbox" class="child"> 
  3.<input type="checkbox" class="child"> 
  4.<input type="checkbox" class="child"> 
  5.<input type="checkbox" class="child"> 

<script>
    $(function(){
      $('#parent').on('change',function(){
         $('.child').prop('checked',$(this).prop('checked'));
      });
      $('.child').on('change',function(){
         $('#parent').prop('checked',$('.child:checked').length ? true: false);
      });
    });
</script>

Fiddle

You can achieve it like,

$(function() {
  $('#parent').on('change', function() {
    $('.child').prop('checked', this.checked);
  });
  $('.child').on('change', function() {
    $('#parent').prop('checked', $('.child:checked').length===$('.child').length);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Select All<input type="checkbox" id="parent" /></div>
1.<input type="checkbox" class="child"> 2.
<input type="checkbox" class="child"> 3.
<input type="checkbox" class="child"> 4.
<input type="checkbox" class="child"> 5.
<input type="checkbox" class="child">

Upvotes: 5

Arun P Johny
Arun P Johny

Reputation: 388316

Checkout

<div>Select All<input id="all" type="checkbox" checked="true"></div>

then

jQuery(function($){
    var $all = $('#all').change(function(){
        $checkboxes.prop('checked', this.checked);
    });
    var $checkboxes = $('input[type="checkbox"]').not($all).change(function(){
        $all.prop('checked', $checkboxes.not(':checked').length == 0);
    });
    $checkboxes.eq(0).change();
})

Demo: Fiddle

Upvotes: 0

Manish Kumar
Manish Kumar

Reputation: 10482

Made few chages in HTML:

<div>Select All<input type="checkbox" checked="true" onChange='f.update(this)'/>
</div> 
 <div id="target">
   1.<input type="checkbox"/> 
   2.<input type="checkbox"/> 
   3.<input type="checkbox"/> 
   4.<input type="checkbox"/> 
   5.<input type="checkbox"/> 
</div>

jQuery:

var f=(function(){
    return{
       update:function(t){
          if($(t).is(':checked'))
           {            
                $('#target input[type=checkbox]').prop('checked',true);
           }else{$('#target input[type=checkbox]').prop('checked',false);}
       }
    }
})();

Upvotes: 0

Math chiller
Math chiller

Reputation: 4167

<div>Select All<input id= "all" type="checkbox" checked="true" />
    </div> 
1.<input class='checkbox' type="checkbox"> 
2.<input type="checkbox"class='checkbox'> 
3.<input type="checkbox"class='checkbox'> 
4.<input type="checkbox"class='checkbox'> 
5.<input type="checkbox"class='checkbox'> 

$(document).ready(function(){
    $("#all").change(function(){
        $('.checkbox').prop('checked', $(this).prop('checked'));
    });
});

fiddle

Upvotes: 0

shemy
shemy

Reputation: 583

you can try this:

            <html>
            <head>
            <script type="text/javascript">
            function toggleGroup(id) {
                var group = document.getElementById(id);
                var inputs = group.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = (inputs[i].checked) ? false : true;
                }

            }
            window.onload = function() {
            document.getElementById("checkmain").onchange = function() {
               toggleGroup("check_grp");

            }
            }
            </script>
            </head>
            <body>
             <form name="form1" >
                <input type="checkbox" name="checkmain" id="checkmain" /><br />
                <p id="check_grp">
                     <input type="checkbox" /><label for="check1">check 1</label>
                     <input type="checkbox"  /><label for="check2">check 2</label>
                     <input type="checkbox"  /><label for="check3">check 3</label>
                     <input type="checkbox"  /><label for="check4">check 4</label>
                     <input type="checkbox"  /><label for="check5">check 5</label>
                </p>
            </form>
            </body>
            </html>

Upvotes: 1

Praveen
Praveen

Reputation: 56501

Usig jQuery you can do like this

HTML:

<input id='selectall' type="checkbox" checked="true">

JS:

$('#selectall').change(function () {
    if ($(this).prop('checked')) {
        $('input').prop('checked', true);
    } else {
        $('input').prop('checked', false);
    }
});
$('#selectall').trigger('change');

Check this in fiddle

Upvotes: 10

Related Questions