0

您好，我有一个关于 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代码：

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

4 回答 4

1

更改您的子元素类名称并在您的 show 函数中调用它。它将为您完成工作。它现在无法按预期工作，因为第一个的类名也与其他类相同。

于 2013-09-18T07:35:27.870 回答
0

尝试这个

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

});

演示

于 2013-09-18T07:51:55.723 回答
0

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

    <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”函数，请参见此处：如何检查 jQuery 中是否选中了复选框？

于 2013-09-18T08:05:42.240 回答
0 
 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" />
于 2013-09-18T08:58:11.407 回答