jQuery操作復選框checkbox技巧總結 ---- 設置選中、取消選中、獲取被選中的值、判斷是否選中等


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(){

    return true;//函數返回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博客

http://blog.csdn.net/chenchunlin526/article/details/77426796  

 

四、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;

    });

}
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM