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
});

 

三、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;
    });
}