你真的了解checkbox的⽤法吗？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.4.1了（2019年5⽉1⽇） 。
⼆、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(),
$("#cb").attr("checked","checked");//通⽤做法，现在不推荐了
$("#cb").attr("checked",true);//不标准，不推荐了
$("#cb").attr("checked","true");//不标准，不推荐了
3、jQuery的prop()的4种赋值（推荐如下写法）:
$("#cb").prop("checked",true);//标准写法，推荐！
$("#cb").prop({checked:true});//map键值对
$("#cb").prop("checked",function(){
jquery的attr属性return true;//函数返回true或false
});
//$("#cb").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操作checkbox技巧总结
1、获取单个checkbox选中项的值(三种写法)
$("#cb").find("input:checkbox:checked").val()
//或者
$("#cb").find("input:[type='checkbox']:checked").val();
$("#cb").find("input[type='checkbox']:checked").val();
/
/或者
$("#cb").find("input:[name='ck']:checked").val();
$("#cb").find("input[name='ck']:checked").val();
2、获取多个checkbox选中项
$("#cb").find('input:checkbox').each(function(){//遍历所有复选框
if($(this).prop('checked')==true){
console.log($(this).val());//打印当前选中的复选框的值
}
});
function getCheckBoxVal(){//jquery获取所有选中的复选框的值
var chk_value =[];
$("#cb").find('input[name="test"]:checked').each(function(){//遍历，将所有选中的值放到数组中
chk_value.push($(this).val());
});
alert(chk_value.length==0?'你还没有选择任何内容！':chk_value);
}
3、设置第⼀个checkbox 为选中值
$("#cb").find('input:checkbox:first').prop("checked",true);
//或者
$("#cb").find('input:checkbox').eq(0).prop("checked",true);
4、设置最后⼀个checkbox为选中值
$("#cb").find('input:checkbox:last').prop("checked",true);
5、根据索引值设置任意⼀个checkbox为选中值
$("#cb").find('input:checkbox').eq(索引值).prop('checked',true);//索引值=0,
//或者
$("#cb").find('input:checkbox').slice(1,2).prop('checked',true);//同时选中第0个和第1个checkbox，从索引0开始（包含），到索引2（不包含）6、根据value值设置checkbox为选中值
$("#cb").find("input:checkbox[value='1']").prop('checked',true);
$("#cb").find("input[type='checkbox'][value='1']").prop('checked',true);
7、删除checkbox：①删除value=1的checkbox ②删除第⼏个checkbox
$("#cb").find("input:checkbox[value='1']").remove();//将匹配元素从DOM中删除，将标签从页⾯上删除了
$("#cb").find("input:checkbox").eq(index).remove();//索引值 index=0,
//如删除第3个checkbox:
$("#cb").find("input:checkbox").eq(2).remove();
8、全部选中或全部取消选中
$("#cb").find('input:checkbox').each(function(){
$(this).prop('checked',true);
});
//或者
$("#cb").find('input:checkbox').each(function(){
$(this).prop('checked',false);
});
9、选中所有奇数项或偶数项
$("#cb").find("input[type='checkbox']:even").prop("checked",true);//选中所有偶数$("#cb").find("input[type='checkbox']:odd").prop("checked",true);//选中所有奇数10、反选
⽅法⼀：
$("#btn").click(function(){
$("input[type='checkbox']").each(function(){//反选
if($(this).prop("checked")){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
});
});
⽅法⼆：
$("#btn").on('click',function(){
//反选所有的复选框(没选中的改为选中，选中的改为取消选中)
$("#cb").find("input[type='checkbox']").prop("checked",function(index, oldValue){ return!oldValue;
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。