jquery attr处理checkbox / select 等表单元素

1 <body>
2 <form action="">
3 <input type="checkbox" id="checkedAll">全选/全不选<br>
4 <input type="checkbox" name="items" value="足球">足球
5 <input type="checkbox" name="items" value="蓝球">蓝球
6 <input type="checkbox" name="items" value="羽毛球">羽毛球

<input type="checkbox" name="items" value="乒乓球">乒乓球<br> 7 <input type="button" id="send" value="提交"> 8 </form></body>

 

 

 运行起来似乎没问题,但当多次点击之后会发现,属性可以添加上去,但选中状态并没有改变。

 

这就要归宿到jQuery的版本问题了,在1.6之后,对于元素固有的属性,应该使用 prop() 方法。

 

1 <script>$("#checkedAll").on("click",function(){
2         console.log(!this.checked);if(this.checked){
3             $("input[name=items]").prop("checked",true);
4         }else{
5             $("input[name=items]").prop("checked",false);
6         }
7     })</script>

 

 以上代码还可以精简为

 1 <script>$("#checkedAll").on("click",function(){ 2 $("input").prop("checked",this.checked); 3 })</script> 

原文链接:http://www.php.cn/js-tutorial-368457.html

posted @ 2018-08-18 21:10  Octopus22  阅读(92)  评论(0编辑  收藏  举报