jQuery操作复选框checkbox方法

发布：2023/4/20 18:32:42作者：管理员来源：本站浏览次数：733

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

});

}

　windows10下搭建mysql5.7的主从同步

JQuery checkedBox全选和全部选　

jquery操作select大全详解 win7打印机共享到win10操作方法总结 jquery.ajax()操作默认为异步调用 jquery常用操作总结 jQuery each()方法 return true false jquery根据checkbox中name名获取选中项个数 C#MVC中分页操作及控件使用方法 Nodejs Redis 全部操作方法 jQuery操作复选框checkbox方法 C#去除gif图片水印的操作方法

柏港建站平台

柏港 Jquery

jQuery操作复选框checkbox方法

柏港为您推荐了一些相关资讯