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 );
  14. $('[name=items]:checkbox').prop("checked", this.checked ); //所有checkbox跟着全選的checkbox走。
  15. });
  16. </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="反 選"/>
  12. <input type="button" id="send" value="提 交"/>
  13. </form>
  14. //全選
  15. $("#CheckedAll").click(function(){
  16. $('[name=items]:checkbox').prop('checked', true);
  17. });
  18. //全不選
  19. $("#CheckedNo").click(function(){
  20. $('[type=checkbox]:checkbox').prop('checked', false);
  21. });
  22. //反選
  23. $("#CheckedRev").click(function(){
  24. $('[name=items]:checkbox').each(function(){
  25. //此處用JQ寫法頗顯啰嗦。體現不出JQ飄逸的感覺。
  26. //$(this).prop("checked", !$(this).prop("checked"));
  27. //直接使用JS原生代碼,簡單實用
  28. this.checked=!this.checked;
  29. });
  30. });

補充知識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();


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM