導入JQ的包

這是導入菜鳥教程的jq包

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>

jq代碼

<script type="text/javascript"> $(function() {var i=false;//全選操作$("#all").on("click",function(){if(i==false){//選中方式不同，詳細的可以參考jq手冊$("input[name='id']").prop("checked",true);i=true;}else{$("input[name='id']").prop("checked",false);i=false;}});//反選操作$("#Rev").on("click",function(){$("[type=checkbox]:checkbox").each(function() {this.checked = !this.checked;i=!i;});});//全不選操作$("#allNot").on("click",function(){$("input[name='id']").prop("checked",false);i=false;});}); </script>

這里將true和false賦給i。如果直接用true和false的話，點擊多選按鈕，然后再點擊反選/全不選后，要再點擊兩次全選按鈕才有效（解決的辦法沒找到），所以就用i來代替true和false，每次點擊后，都清空一下狀態。

<td colspan="*">批量操作：&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="全選" id="all" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="反選" id="Rev" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="全不選" id="allNot" /> </td> <!-- 下面這個是多選框的寫法 --> <input type="checkbox" name="id">

總結

以上是生活随笔為你收集整理的JQ实现全选、反选、全不选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。