结构如下: <input type=checkbox value="10"  name="10"  class="ckhd"  />10     
                <p>
                    <input type=checkbox value="1001"  name="1001" class="cklst"/>1001
                    <input type=checkbox value="1002"  name="1002" class="cklst"/>1002
                    <input type=checkbox value="1003"  name="1003" class="cklst"/>1003
                </p> 
 <input type=checkbox value="20"  name="20"  class="ckhd"  />20     
                <p>
                    <input type=checkbox value="2001"  name="2001" class="cklst"/>2001
                    <input type=checkbox value="2002"  name="2002" class="cklst"/>2002
                    <input type=checkbox value="2003"  name="2003" class="cklst"/>2003
                </p> Jquery 实现
点击10  1001,1002,1003全选或取消
点击1001,1002,1003其中一个 10选中 
1001,1002,1003都没选 10取消选中
同样 20   2001,2002,2003也要实现此功能
小弟才学Jquery  请各位指教!

解决方案 »

  1.   


            $(document).ready(function(){
                
                  $("#abc").click(function(){
                        $(".cklst").attr("checked",$(this).attr("checked"));
                  });
            });
    <input type="checkbox" value="10"  name="10"  class="ckhd"  id="abc" />10     
                    <p>
                        <input type="checkbox" value="1001"  name="1001" class="cklst"/>1001
                        <input type="checkbox" value="1002"  name="1002" class="cklst"/>1002
                        <input type="checkbox" value="1003"  name="1003" class="cklst"/>1003
                    </p> 
     <input type="checkbox" value="20"  name="20"  class="ckhd"  id="b"/>20     
                    <p>
                        <input type="checkbox" value="2001"  name="2001" class="cklst1"/>2001
                        <input type="checkbox" value="2002"  name="2002" class="cklst1"/>2002
                        <input type="checkbox" value="2003"  name="2003" class="cklst1"/>2003
                    </p> 选择器,你用name也可以,用class也可以。
      

  2.   


       
            $(document).ready(function(){
                
                  $("#abc").click(function(){
                        $(".cklst").attr("checked",$(this).attr("checked"));
                  });
                  $(".cklst").click(function(){
                      
                        if($(this).attr("checked"))
                            
                            $("#abc").attr("checked","true");
                       else
                            $("#abc").attr("checked",""); 
                  });
            });刚才没看全。
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> New Document </title>
    <style type="text/css">

    </style>
    <script src="jquery-1.5.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $('.ckhd').click(function(){
    if($(this).is(':checked')){
    $(this).next('p').children('.cklst').attr('checked', true);
    }else{
    $(this).next('p').children('.cklst').attr('checked', false);
    }
    });
    $('.cklst').click(function(){
    if($(this).is(':checked')){
    $(this).parent('p').prev('.ckhd').attr('checked', true);
    }else{
    if($(this).siblings('.cklst:checked').length == 0){
    $(this).parent('p').prev('.ckhd').attr('checked', false);
    }
    }
    });
    });
    </script>
    </head>

    <body>
    <input type=checkbox value="10"  name="10"  class="ckhd"  />10     
    <p>
    <input type=checkbox value="1001"  name="1001" class="cklst"/>1001
    <input type=checkbox value="1002"  name="1002" class="cklst"/>1002
    <input type=checkbox value="1003"  name="1003" class="cklst"/>1003
    </p> 
    <input type=checkbox value="20"  name="20"  class="ckhd"  />20     
    <p>
    <input type=checkbox value="2001"  name="2001" class="cklst"/>2001
    <input type=checkbox value="2002"  name="2002" class="cklst"/>2002
    <input type=checkbox value="2003"  name="2003" class="cklst"/>2003
    </p> 
    </body>
    </html>主要是熟练使用选择器和筛选方法
      

  4.   

    <html>
    <head>    <script type="text/javascript" src="jquery/jquery.js"></script>    <script type="text/javascript">
            $(document).ready(function() {
                $(".ckhd").click(function() {
                    var checked = $(this).attr("checked");
                    $(this).next("p").find("input").attr("checked", checked);
                });            $(".cklst").click(function() {
                    var count = 0;
                    $(this).siblings().andSelf().each(function() {
                        if ($(this).is(":checked"))
                            count++;
                    });
                    $(this).parent().prev().attr("checked", Boolean(count));
                });
            }); 
        </script></head>
    <body>
     
        <input type="checkbox" value="10" name="10" class="ckhd" />10
        <p>
            <input type="checkbox" value="1001" name="1001" class="cklst" />1001
            <input type="checkbox" value="1002" name="1002" class="cklst" />1002
            <input type="checkbox" value="1003" name="1003" class="cklst" />1003
        </p>
        <input type="checkbox" value="20" name="20" class="ckhd" />20
        <p>
            <input type="checkbox" value="2001" name="2001" class="cklst" />2001
            <input type="checkbox" value="2002" name="2002" class="cklst" />2002
            <input type="checkbox" value="2003" name="2003" class="cklst" />2003
        </p>
    </body>
    </html>