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();