生活随笔
收集整理的這篇文章主要介紹了
jQuery实现checkbox的全选反选方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
checkbox的全選、取消全選、選中所有奇數、選中所有偶數等方法的實現代碼如下：
注意jQuery的版本：jQuery1.6增加了prop，1.6之前的還是使用attr()和removeAttr()
<!DOCTYPE html>
<html lang="en">
<head> <title>checkbox全選、反選等實現方式
</title> <meta charset="UTF-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript"> $(function($){$("#btn1").click(function(){ $("input[name='checkbox']").prop("checked",true); });$("#btn2").click(function(){ $("input[name='checkbox']").prop("checked", false); });$("#btn3").click(function(){$("input[name='checkbox']").prop("checked", false); $("input[name='checkbox']:even").prop("checked", true); });$("#btn6").click(function(){ $("input[name='checkbox']").prop("checked", false); $("input[name='checkbox']:odd").prop("checked", true); });$("#btn4").click(function(){ $("input[type='checkbox']").prop("checked", function( i, val ) { return !val;});})var aa=""; $("#btn5").click(function(){ $("input[name='checkbox']:checkbox:checked").each(function(){ aa+=$(this).val();});document.write(aa); });})</script>
</head>
<body> <form id="form1" runat="server"> <div> <input type="button" id="btn1" value="全選"><input type="button" id="btn2" value="取消全選"> <input type="button" id="btn3" value="選中所有奇數"> <input type="button" id="btn6" value="選中所有偶數"> <input type="button" id="btn4" value="反選"> <input type="button" id="btn5" value="獲得選中的所有值"> <br><input type="checkbox" name="checkbox" value="checkbox1">checkbox1
<br><input type="checkbox" name="checkbox" value="checkbox2">checkbox2
<br><input type="checkbox" name="checkbox" value="checkbox3">checkbox3
<br><input type="checkbox" name="checkbox" value="checkbox4">checkbox4
<br><input type="checkbox" name="checkbox" value="checkbox5">checkbox5
<br><input type="checkbox" name="checkbox" value="checkbox6">checkbox6
<br><input type="checkbox" name="checkbox" value="checkbox7">checkbox7
<br><input type="checkbox" name="checkbox" value="checkbox8">checkbox8
</div> </form>
</body>
</html>
注意：禁用復選框的方法：$(“input[type=‘checkbox’]”).prop(“disabled”, true);
總結
以上是生活随笔為你收集整理的jQuery实现checkbox的全选反选方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
