实现以下功能:
1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中
2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中
3:当点击全不选按钮,上面四个全部取消
4:当点击反选按钮,选中的变没有选中,没有选中变选中
1 <script type="text/javascript" src="jquery-1.8.2.min.js"></script> //这个是文件,每一次都要看这段代码有没有写 2 </head> 3 <body> 4 <form method="post" action="" > 5 请选择你的爱好! 6 <br/> 7 <input type="checkbox" id="checkAll_2"/>全选/全不选<br/> 8 <input type="checkbox" name="items" value="足球"/>足球 9 <input type="checkbox" name="items" value="篮球"/>篮球 10 <input type="checkbox" name="items" value="游泳"/>游泳 11 <input type="checkbox" name="items" value="唱歌"/>唱歌 12 <br/> 13 <input type="button" id="checkAll" value="全选"/> 14 <input type="button" id="checkNo" value="全不选"/> 15 <input type="button" id="checkRev" value="反选"/> 16 <input type="button" id="send" value="提交"/> 17 </form> 18 19 <script type="text/javascript"> 20 //全选 21 $("#checkAll").click(function(){ 22 $("input[name=items]").attr("checked","checked"); //$中代表选中在input标签的前提下name属性为items标签,attr代表添加属性 23 }); 24 25 //全不选 26 $("#checkNo").click(function(){ 27 $("input[type=checkbox]").attr("checked",null); //$中代表选中在input前提下type为checkbox,把checked为null代表不选中 28 }); 29 //反选 30 $("#checkRev").click(function(){ 31 $("input[type=checkbox][name=items]").each(function(){ //也可以放多个属性,each这里代表迭代,迭代你选中的所有元素,因为这里满足条件的有四个 32 33 if(this.checked){ //.checked可以用来判断该复选框是否被选中 34 $(this).attr("checked",null); 35 }else{ 36 $(this).attr("checked","checked"); 37 } 38 }); 39 }); 40 //全选/全不选 41 $("#checkAll_2").click(function(){ 42 if(this.checked){ //这里代表如果选中,那么下面所有都选中 43 $("input[type=checkbox][name=items]").attr("checked","checked"); 44 }else{ 45 $("input[type=checkbox][name=items]").attr("checked",null); 46 } 47 }); 48 </script> 49 </body>
思考:33行中的this.checked没有加$(),而34行this为什么加$符号?
理解:如果是this那就代表它是个dom对象,而当你加上$(this)那就说明这就是一个Juery对象。
而.checked是dom对象的方法,.attr是Juery对象的方法。所有当你以后当前对象需要用到dom对象方法就用this,要用Juery对象的方法就用$(this)
相关文章
暂无评论...