Checkboxes group

Question

Hello I've got a question about chechbox. This code checked/unchecked all checkboxes if first one is checked/unchecked. But I want to do something else with that. I want to add function that, if all of checkboxes are checked then the first one too, but when one or more of the checkboxes are unchecked then first one will be unchecked.

<input class="checkbox" onClick=Show("checkbox") type="checkbox" name="checkboxAll" value="all">
<input class="checkbox" type="checkbox" name="checkboxname1" value="1">
<input class="checkbox" type="checkbox" name="checkboxname2" value="2">
<input class="checkbox" type="checkbox" name="checkboxname3" value="3">

js code:

 function Show( a ) {
     if ( $("."+a).attr('checked') == true )
          $("."+a).attr('checked', true);   
     else 
          $("."+a).attr('checked', false);          
 }

score 1 · Answer 1 · answered Sep 18 '13 at 07:35

1

change your child element class names and call it in your show function. It will do the work for you. It is not working right now as expected as the class names are same for 1st one also as the others.

answered Sep 18 '13 at 07:35

Ganesh Pandhere

1,612
8
11

Amit · Answer 2 · 2013-09-18T07:59:08.760

Try this

$(function(){
    $('input[name="checkboxAll"]').change(function(){
        $('input[name^="checkboxname"]').prop("checked",$(this).is(':checked'))
    });


 $('input[name^="checkboxname"]').change(function(){
    var a=$('input[name^="checkboxname"]').length;
     if( $('input[name^="checkboxname"]').filter(":checked").length==a){
         $('input[name="checkboxAll"]').prop("checked",true)}
     else
     {
         $('input[name="checkboxAll"]').prop("checked",false)
     }
    });  

});

DEMO

score 0 · Accepted Answer · edited May 23 '17 at 10:25

I have changed the names of you checkBoxes a bit, but from what I can understand in your question, this will work:

    <input id="first" onClick="Show();" type="checkbox" name="checkboxAll" value="all">
    <input class="checkbox" onClick="check();" type="checkbox" name="checkboxname1" value="1">
    <input class="checkbox" onClick="check();" type="checkbox" name="checkboxname2" value="2">
    <input class="checkbox" onClick="check();" type="checkbox" name="checkboxname3" value="3">

and the js:

        function Show() {
             if ($('#first').is(':checked')){
                  $(".checkbox").prop('checked', true);  
            }
             else{
                  $(".checkbox").prop('checked', false);   
            }

         }  

        function check(){
            allChecked = true;
            $(".checkbox").each(function(){
                if (!$(this).is(':checked')){
                    allChecked = false;
                }
            });
            if (allChecked){
                $("#first").prop('checked', true);  
            }
            else{
                $("#first").prop('checked', false); 
            }

        }

It is better to use the "prop" than the "attr" function, see here: How to check whether a checkbox is checked in jQuery?

Vishnu Sharma · Answer 4 · 2013-09-18T09:45:16.803

 Include jQuery and copy and paste this code 
 Its working.......    


 <script>
     $(function(){
          $('#select_all_').click(function(){
            if($('#select_all_').is(':checked')){
               $(".check_").attr ( "checked" ,"checked" );
                }
                else
                {
                    $(".check_").removeAttr('checked');
                }
            });


            $('.check_').click(function(){
                    $.each($('.check_'),function(){
                            if(!$(this).is(':checked'))
                                $('#select_all_').attr('checked',false);
                    });
                });
            });
            </script>

     <input type="checkbox" name="chkbox" id="select_all_" value="1" />


     <input type="checkbox" name="chkbox" class="check_" value="Apples" />
     <input type="checkbox" name="chkbox" class="check_" value="Bananas" />
     <input type="checkbox" name="chkbox" class="check_" value="Apples" />
     <input type="checkbox" name="chkbox" class="check_" value="Bananas" />

Checkboxes group

4 Answers4