日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

jQuery实现checkbox的全选反选方法

發布時間：2025/3/15 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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($){//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); });//選中所有奇數 $("#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); });//選中所有偶數 $("#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;});})//獲取選擇項的值 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的全选反选方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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