jquery实现复选框全选，全不选，反选中的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现复选框全选，全不选，反选中的问题相关的知识，希望对你有一定的参考价值。
今天试了一下用jquery选择复选框，本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法。
html代码如下（这里没有用任何样式，就没有再放css了）：
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test_ch5.css" > <title>test_ch5</title> </head> <body> <div id="wrapper"> <form action="" method="post"> <p>你最爱好的运动是？</p> <input type="checkbox" name="items" >足球 <input type="checkbox" name="items">篮球 <input type="checkbox" name="items">羽毛球 <input type="checkbox" name="items">乒乓球<br> <input type="button" id="all" value="全 选"> <input type="button" id="no" value="全不选"> <input type="button" id="reverse" value="反 选"> <input type="button" id="send" value="提 交"> </form> </div> </body> <script src="jquery-3.2.1.js"></script> <script> $(function(){ $("#all").click(function(){ $(‘[name=items]:checkbox‘).prop(‘checked‘,true); }); $("#no").click(function() { $(‘[type=checkbox]:checkbox‘).prop(‘checked‘,false); }); $("#reverse").click(function() { $(‘input[name=items]‘).each(function(){ $(this).prop(‘checked‘,!$(this).prop(‘checked‘)); }); }); }) </script> </html>
界面如下：
之前不知道有prop，使用prop的地方全部用的是attr，发现实现不了想要的功能啊，然后才发现的prop，它是是jquery1.6以后出来的，用来区别之前的.attr()方法.
区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
以上是关于jquery实现复选框全选，全不选，反选中的问题的主要内容，如果未能解决你的问题，请参考以下文章