1. 程式人生 > 其它 >jQuery操作複選框checkbox方法

jQuery操作複選框checkbox方法

一、jQuery判斷checked是否是選中狀態的三種方法:

$("#cb1").attr('checked') // 返回:"checked"或"undefined";
$("#cb1").prop('checked') // 返回true/false
$("#cb1").is(':checked')  // 返回true/false //別忘記冒號哦

二、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"); //不標準

三、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); //選中所有奇數

四.反選

/*方法一:*/
$("#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;
    });
}

原文連結:https://blog.csdn.net/xuweisen/article/details/109327767