jQuery操作複選框checkbox技巧總結 --- 設定選中、取消選中、獲取被選中的值、判斷是否選中等 一、checked屬性定義
先了解下input標籤的checked屬性： 1、HTML <input> checked 屬性
◆ 定義和用法
checked 屬性是一個布林屬性。
checked 屬性規定在頁面載入時應該被預先選定的 <input> 元素。
checked 屬性適用於 <input type="checkbox"> 和 <input type="radio">。
checked 屬性也可以在頁面載入後，通過 JavaScript 程式碼進行設定。

◆ HTML 4.01 與 HTML5之間的差異
無。 ◆ HTML 與 XHTML 之間的差異
在 XHTML 中，禁止屬性最小化，checked 屬性必須定義為<input checked="checked" />。
本文討論的範圍為jQuery1.6+ 以上版本，現在jQuery已經到3.2.1了（2018年1月4日）！ 。開發中建議使用1.11及以上版本。
二、checked屬性的用法
注意：操作checked、disabled、selected屬性，強制建議只用prop()方法！！，不要用attr()方法。 1、jQuery判斷checked是否是選中狀態的三種方法:

.attr('checked') // 返回:"checked"或"undefined" ;.prop('checked') // 返回true/false.is(':checked')  // 返回true/false //別忘記冒號哦 2、jQuery賦值checked的幾種寫法: 所有的jQuery版本都可以這樣賦值，不建議用attr(): $("#cb1").attr("checked","checked"); //通用做法，現在不推薦了$("#cb1").attr("checked",true); //不標準，不推薦了$("#cb1").attr("checked","true"

); //不標準，不推薦了 jQuery的prop()的4種賦值（推薦如下寫法）: $("#cb1").prop("checked",true); //標準寫法，推薦！$("#cb1").prop({checked:true}); //map鍵值對    $("#cb1").prop("checked",function(){returntrue;//函式返回true或false});//$("#cb1").prop("checked","checked"); //不標準 三、標籤中checked="checked"已有，但卻不顯示打勾的解決辦法
在做web專案的時候，做了一個功能，就是當勾選欄目，把所有的角色全勾上。剛開始使用瞭如下程式碼： function check(id,check) {        if (check) {                        $("." + id).find("input[type='checkbox']").attr("checked", true);            } else {                        $("." + id).find("input[type='checkbox']").attr("checked", false);            }} 第一遍勾選和取消是有效的，但是第二遍以後就沒反應了，查看了屬性，發現checked屬性一直存在，但是沒顯示勾。就考慮移除checked屬性看看。  function check(id,check) {        if (check) {                        $("." + id).find("input[type='checkbox']").attr("checked", true);            } else {                        $("." + id).find("input[type='checkbox']").removeAttr("checked");            }} 這次看到checked屬性勾上有了，取消就沒了，可是問題還是沒解決，還是第二遍以後就沒反應了。 可是我都用1.11的版本了，正確的做法是使用prop()方法設定checkbox的checked屬性值。  function check(id,check) {        if (check) {                        $("." + id).find("input[type='checkbox']").prop("checked", true);            } else {                        $("." + id).find("input[type='checkbox']").prop("checked", false);            }} 這個問題會出現的本質就是，jQuery中的attr()和prop()兩個方法的使用區別。 具體請參考： jQuery中的attr()與prop()設定屬性、獲取屬性的區別 - chunlynn的小屋 - CSDN部落格 四、jQuery操作checkbox技巧總結 1、獲取單個checkbox選中項的值(三種寫法) $("#chx1").find("input:checkbox:checked").val()//或者$("#chx1").find("input:[type='checkbox']:checked").val();$("#chx1").find("input[type='checkbox']:checked").val();//或者$("#chx1").find("input:[name='ck']:checked").val();$("#chx1").find("input[name='ck']:checked").val(); 2、 獲取多個checkbox選中項 $("#chk1").find('input:checkbox').each(function() { //遍歷所有複選框if ($(this).prop('checked') == true) {        console.log($(this).val()); //列印當前選中的複選框的值    }});function getCheckBoxVal(){ //jquery獲取所有選中的複選框的值 var chk_value =[];     $("#chk1").find('input[name="test"]:checked').each(function(){ //遍歷，將所有選中的值放到陣列中        chk_value.push($(this).val());     });     alert(chk_value.length==0 ?'你還沒有選擇任何內容！':chk_value); }  3、設定第一個checkbox 為選中值 $("#chk1").find('input:checkbox:first').prop("checked",true);//或者$("#chk1").find('input:checkbox').eq(0).prop("checked",true); 4、設定最後一個checkbox為選中值

$("#chk1").find('input:checkbox:last').prop("checked",true);

5、根據索引值設定任意一個checkbox為選中值 $("#chk1").find('input:checkbox').eq(索引值).prop('checked', true);  //索引值=0,1,2.... //或者$("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同時選中第0個和第1個checkbox

//從索引0開始（包含），到索引2（不包含）的checkbox

6、根據value值設定checkbox為選中值 $("#chk1").find("input:checkbox[value='1']").prop('checked',true);$("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true); 7、刪除checkbox：①刪除value=1的checkbox ②刪除第幾個checkbox

$("#chk1").find("input:checkbox[value='1']").remove(); //將匹配元素從DOM中刪除，將標籤從頁面上刪除了

$("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....//如刪除第3個checkbox:$("#chk1").find("input:checkbox").eq(2).remove(); 8、全部選中或全部取消選中 $("#chk1").find('input:checkbox').each(function() {    $(this).prop('checked', true);});//或者$("#chk1").find('input:checkbox').each(function () {    $(this).prop('checked',false);}); 9、選中所有奇數項或偶數項 $("#chk1").find("input[type='checkbox']:even").prop("checked",true); //選中所有偶數 $("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //選中所有奇數  10、反選 方法一： $("#btn4").click(function(){     $("input[type='checkbox']").each(function(){ //反選 if($(this).prop("checked")){              $(this).prop("checked",false);           } else{              $(this).prop("checked",true);          }     });    });  方法二： $("#btn4").on('click',function(){  //反選所有的複選框(沒選中的改為選中，選中的改為取消選中)     $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){return !oldValue;    });} 本系列其他相關文章：