Jquery 全选、取消

oo00gg99 2011-07-06 05:21:15

结构如下：



 <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 请各位指教！

...全文

105 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

燥动的心 2011-07-07

打赏
举报

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

oo00gg99 2011-07-07

打赏
举报

谢谢各位帮助！

lsw645645645 2011-07-06

打赏
举报

楼上写得不错

inetfuture 2011-07-06

打赏
举报



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

主要是熟练使用选择器和筛选方法

coxie007 2011-07-06

打赏
举报



   

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

              });

        });

刚才没看全。

coxie007 2011-07-06

打赏
举报



        $(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也可以。