复选框组

Question

您好我有关于chechbox的问题。 如果选中/取消选中第一个复选框，则此代码选中/取消选中所有复选框。 但是我想做点其他事情。我想添加一个函数，如果所有的复选框都被选中，那么第一个也是，但是当一个或多个复选框被取消选中时，第一个复选框将被取消选中。

<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);          
 }

Answer 1

更改子元素类名称并在show函数中调用它。它会为你做的工作。它现在不能按预期工作，因为第一个类的名称也与其他类名相同。

Answer 2

试试这个

$(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

Answer 3

我已经更改了一些复选框的名称，但是根据我在您的问题中可以理解的内容，这将有效：

    <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">

和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); 
            }

        }

最好使用“prop”而不是“attr”函数，请参阅此处：How to check whether a checkbox is checked in jQuery?

Answer 4

 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" />