Javascript 复选框组

你好，我有一个关于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">

---

更改子元素类名并在show函数中调用它。它将为你做这项工作。它现在不能正常工作，因为第一个的类名和其他的类名是一样的

试试这个

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

});

---

我已稍微更改了您的复选框名称，但根据我对您问题的理解，这将起作用：

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

最好使用“prop”而不是“attr”函数，请参见此处：

包含jQuery并复制和粘贴此代码
它的工作。。。。。。。
$（函数（）{
$（'#选择所有）。单击（函数（）{
如果（$（'#全选''）。为（':checked'））{
$（.check).attr（“checked”、“checked”）；
}
其他的
{
$（.check).removeAttr（'checked'）；
}
});
$（'.check'）。单击（函数（）{
$.each（$（'.check'），function（）{
如果（！$（this）.is（':checked'））
$（'#选择所有''.attr（'checked'，false））；
});
});
});

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

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

        }

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