<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="dist/jquery.js" type="text/javascript"></script> <title>田林哥哥选择框练习</title> <script type="text/javascript"> //让全选框影响子框的方法 $(function(){ //拿到所有类名为all的，绑定一个点击事件 $(".all").bind("click",function(){ //拿到当前对象的name属性， var name = $(this).prop("name"); //如果当前全选框处于被选择状态 有checked属性 if ($(this).prop("checked")) { //那就让类名和当前name相同的选择框都变成选择状态 $("."+name).prop("checked","tl"); } else{ //如果全选框处于为未被选中状态，那他的儿子们，都要移除掉checked $("."+name).removeProp("checked"); } }) //让子框影响全选框的方法 $(".hobby,.star,.girl").bind("click",function(){ //是否所有子框都被选中了？初始值为 真 var isChecked = true; //拿到所有跟当前类名相同的子框，进行遍历 $("."+this.className).each(function(){ //只要有一个子框是未选中状态，那就让isChecked为假 if(!$(this).prop("checked")){ isChecked = false; } }) //遍历完毕，判断isChecked,为真则说明所以子框都被选中，那就选中全选框 if(isChecked) $("[name='"+this.className+"']").prop("checked","tl"); else//否则就让全选框处于未选中状态 $("[name='"+this.className+"']").removeProp("checked"); }) }) </script> </head> <body> <h1>你的爱好</h1> 全选<input type="checkbox" class="all" name="hobby"/><br /> 篮球<input type="checkbox" class="hobby" /> 足球<input type="checkbox" class="hobby" /> 台球<input type="checkbox" class="hobby" /> 网球<input type="checkbox" class="hobby" /> 球球大作战<input type="checkbox" class="hobby" /> <hr> <h1>你喜欢的明星</h1> 全选<input type="checkbox" class="all" name="star"/><br /> 刘德华<input type="checkbox" class="star" /> 迪丽热巴<input type="checkbox" class="star" /> 高圆圆<input type="checkbox" class="star" /> 李嘉欣<input type="checkbox" class="star" /> 周慧敏<input type="checkbox" class="star" /> <hr> <h1>受人敬仰的妹子</h1> 全选<input type="checkbox" class="all" name="girl"/><br /> 胡美晴<input type="checkbox" class="girl" /> 张菲莉<input type="checkbox" class="girl" /> 金嘉融<input type="checkbox" class="girl" /> 李若妍<input type="checkbox" class="girl" /> 任俊可<input type="checkbox" class="girl" /> </body> </html>