【jQuery】复选框的全选、反选，推断哪些复选框被选中
生活随笔
收集整理的這篇文章主要介紹了
【jQuery】复选框的全选、反选，推断哪些复选框被选中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文與《【JavaScript】復選框的全選、反選。推斷哪些復選框被選中》（點擊打開鏈接）為姊妹篇，把里面內容再與jQuery框架中實現一次，相同做到例如以下的效果：
布局還是相同的布局，僅僅是因為在jQuery框架中，無須再為button，指定特定的onclick事件處理函數，直接使用jQuery指定就可以：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>全選、反選</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script></head><body><button id="selected"/>哪里復選框被選中？ </button><button id="selectAll"/>全選</button><button id="selectReserve"/>反選</button><br/>1<input type="checkbox" name="checkBoxGroup" value="1"/><br/>2<input type="checkbox" name="checkBoxGroup" value="2"/><br/>3<input type="checkbox" name="checkBoxGroup" value="3"/><br/>4<input type="checkbox" name="checkBoxGroup" value="4"/><br/> </body> </html>之后在jQuery中。取name為checkBoxGroup的復選框數組。直接能夠這樣寫：$(":checkbox[name='checkBoxGroup']")。當然$("input[type='checkbox'][name='checkBoxGroup']")也行。僅僅是$(":checkbox[name='checkBoxGroup']")代碼更加簡單，注意checkbox前面的冒號。拿出來的東西是與Javascript的document.getElementsByName("xx")一樣。同位復選框數組。
僅僅是在jQuery中能夠直接利用each去遍歷。為復選框設置選中與否使用prop，不要用attr。詳細在《【jQuery】對于復選框操作的attr與prop》（點擊打開鏈接）已經說過了。
<script type="text/javascript">//哪里復選框被選中？$("#selected").click(function(){var str="被選中的復選框：";$(":checkbox[name='checkBoxGroup']:checked").each(function(){str+=$(this).val()+",";});alert(str);});//全選$("#selectAll").click(function(){$(":checkbox[name='checkBoxGroup']").each(function(){$(this).prop("checked",true);});});//反選$("#selectReserve").click(function(){$(":checkbox[name='checkBoxGroup']").each(function(){$(this).prop("checked",!$(this).prop("checked"));});}); </script>轉載于:https://www.cnblogs.com/zsychanpin/p/7116862.html
總結
以上是生活随笔為你收集整理的【jQuery】复选框的全选、反选，推断哪些复选框被选中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Centos之帮助命令
- 下一篇： 定义函数