jQuery中表单的常用操作（全选、反选）

表单的全选、反选操作一

1. <form method="post" action="">
2. 你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
3. <input type="checkbox" name="items" value="足球"/>足球
4. <input type="checkbox" name="items" value="篮球"/>篮球
5. <input type="checkbox" name="items" value="羽毛球"/>羽毛球
6. <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
7. <input type="button" id="send" value="提　交"/>
8. </form>
9. <script>
10. $("#CheckedAll").click(function(){
11. var checked =$(this).prop("checked")
12. //console.log(checked)
13. $('[name=items]:checkbox').prop("checked", checked );
16. $('[name=items]:checkbox').prop("checked", this.checked ); //所有checkbox跟着全选的checkbox走。
17. });
18. </script>

表单的全选、反选操作二

1. <form method="post" action="">
2. 你爱好的运动是？
3. <br/>
4. <input type="checkbox" name="items" value="足球"/>足球
5. <input type="checkbox" name="items" value="篮球"/>篮球
6. <input type="checkbox" name="items" value="羽毛球"/>羽毛球
7. <input type="checkbox" name="items" value="乒乓球"/>乒乓球
8. <br/>
9. <input type="button" id="CheckedAll" value="全　选"/>
10. <input type="button" id="CheckedNo" value="全不选"/>
11. <input type="button" id="CheckedRev" value="反　选"/>
13. <input type="button" id="send" value="提　交"/>
14. </form>
16. //全选
17. $("#CheckedAll").click(function(){
18. $('[name=items]:checkbox').prop('checked', true);
19. });
21. //全不选
22. $("#CheckedNo").click(function(){
23. $('[type=checkbox]:checkbox').prop('checked', false);
24. });
26. //反选
27. $("#CheckedRev").click(function(){
28. $('[name=items]:checkbox').each(function(){
29. //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
31. //$(this).prop("checked", !$(this).prop("checked"));
33. //直接使用JS原生代码，简单实用
34. this.checked=!this.checked;
35. });
36. });

补充知识attr与prop

在表单中，有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = “disabled”，checked=”checked”。

比如用attr(“checked”)获取checkbox的checked属性时选中的时候可以取到值,值为”checked”但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回”checked”和””,现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop() 如 checked, selected 或者 disabled;

3.其他则使用attr();