日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery实现checkbox的全选反选方法

發(fā)布時(shí)間：2025/3/15 编程问答 24 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery实现checkbox的全选反选方法 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

checkbox的全選、取消全選、選中所有奇數(shù)、選中所有偶數(shù)等方法的實(shí)現(xiàn)代碼如下：
注意jQuery的版本：jQuery1.6增加了prop，1.6之前的還是使用attr()和removeAttr()

<!DOCTYPE html> <html lang="en"> <head> <title>checkbox全選、反選等實(shí)現(xiàn)方式</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($){//prop是jQuery1.6新增的，jQuery1.6之前還是用attr和removeAttr。//全選 $("#btn1").click(function(){ // alert('選中1！');// $("input[name='checkbox']").attr("checked","true");$("input[name='checkbox']").prop("checked",true); });//取消全選$("#btn2").click(function(){ // alert('選中2！');// $("input[name='checkbox']").removeAttr("checked"); $("input[name='checkbox']").prop("checked", false); });//選中所有奇數(shù) $("#btn3").click(function(){// alert('選中3！');// $("input[name='checkbox']:even").attr("checked","true");$("input[name='checkbox']").prop("checked", false); $("input[name='checkbox']:even").prop("checked", true); });//選中所有偶數(shù) $("#btn6").click(function(){ // alert('選中4！');// $("input[name='checkbox']:odd").attr("checked","true"); $("input[name='checkbox']").prop("checked", false); $("input[name='checkbox']:odd").prop("checked", true); });//反選-jQuery1.5/*$("#btn4").click(function(){ $("input[name='checkbox']").each(function(){ if($(this).attr("checked")) { $(this).removeAttr("checked"); }else { $(this).attr("checked","true"); } });}) *///反選-jQuery1.6$("#btn4").click(function(){ $("input[type='checkbox']").prop("checked", function( i, val ) { //i:索引 val:true/false(選中為true,否則為false)return !val;});})//獲取選擇項(xiàng)的值 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="選中所有奇數(shù)"> <input type="button" id="btn6" value="選中所有偶數(shù)"> <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>

注意：禁用復(fù)選框的方法：$(“input[type=‘checkbox’]”).prop(“disabled”, true);

總結(jié)

以上是生活随笔為你收集整理的jQuery实现checkbox的全选反选方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。