jQuery操作复选框checkbox方法

2023-10-08

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