基于JQ的多选/全选/反选
Posted muou2125
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于JQ的多选/全选/反选相关的知识，希望对你有一定的参考价值。
<!-- author：青芒 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选/全选/反选</title> </head> <body> <p>中国古代十大名剑</p> <input type="checkbox" value="全选" id="selectAll"/>全选 <div id="checkBoxList" class="check-all"> <input type="checkbox" value="轩辕"/>轩辕<br> <input type="checkbox" value="湛泸"/>湛泸<br> <input type="checkbox" value="赤霄"/>赤霄<br> <input type="checkbox" value="太阿"/>太阿<br> <input type="checkbox" value="七星龙渊"/>七星龙渊<br> <input type="checkbox" value="干将"/>干将<br> <input type="checkbox" value="莫邪"/>莫邪<br> <input type="checkbox" value="鱼肠"/>鱼肠<br> <input type="checkbox" value="纯钧"/>纯钧<br> <input type="checkbox" value="承影"/>承影<br> </div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(function(){ $("#selectAll").click(function(){ //全选/反选 var checkedFlag = this.checked; $("#checkBoxList :checkbox").prop("checked", checkedFlag); }); $("#checkBoxList :checkbox").click(function(){ var length1 = $("#checkBoxList :checkbox").length; //选项个数 var length2 = $("#checkBoxList :checkbox").filter(":checked").length; //已勾选的个数 if(length1 === length2){ $("#selectAll").prop("checked", true); }else{ $("#selectAll").prop("checked", false); } }) }) </script> </body> </html>
这里需要注意 attr 和 prop 的区别，虽然两个的作用都是给标签添加属性，但是在实际使用过程中，二者对checked属性作用不同，用attr的时候只能选中/取消一次，然后就没作用了，但是prop不会有这个问题。
百度后发现：
对于一个checkbox，若未定义checked="checked"，alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。attribute并不随着checkbox的状态变化而改变。
使用prop($.attr("checked"))的话输出则分别为false和true。property则随其变化而变化。
所以在修改checked属性时要使用prop()。prop()在jQuery1.6版本后新增。
以上是关于基于JQ的多选/全选/反选的主要内容，如果未能解决你的问题，请参考以下文章