0
点赞
收藏
分享

微信扫一扫

jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

乌龙茶3297 2022-03-30 阅读 254


jQuery操作复选框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.2.1了(2018年1月4日)! 。开发中建议使用1.11及以上版本。


二、checked属性的用法

注意:操作checked、disabled、selected属性,强制建议只用prop()方法!!,不要用attr()方法。

1、jQuery判断checked是否是选中状态的三种方法:

  1. ​.attr('checked') // 返回:"checked"或"undefined" ;​

  2. ​.prop('checked') // 返回true/false​

  3. ​.is(':checked')  // 返回true/false //别忘记冒号哦​

2、jQuery赋值checked的几种写法:

所有的jQuery版本都可以这样赋值,不建议用attr():

  1. ​$("#cb1").attr("checked","checked"); //通用做法,现在不推荐了​

  2. ​$("#cb1").attr("checked",true); //不标准,不推荐了​

  3. ​$("#cb1").attr("checked","true"); //不标准,不推荐了​

  4. ​jQuery的prop()的4种赋值(推荐如下写法):​

  5. ​$("#cb1").prop("checked",true); //标准写法,推荐!​

  6. ​$("#cb1").prop({checked:true}); //map键值对    ​

  7. ​$("#cb1").prop("checked",function(){​

  8. ​    return true;//函数返回true或false​

  9. ​});​

  10. ​//$("#cb1").prop("checked","checked"); //不标准​


三、标签中checked="checked"已有,但却不显示打勾的解决办法

在做web项目的时候,做了一个功能,就是当勾选栏目,把所有的角色全勾上。刚开始使用了如下代码:

  1. ​function check(id,check) {        ​

  2. ​    if (check) {                ​

  3. ​        $("." + id).find("input[type='checkbox']").attr("checked", true);        ​

  4. ​    } else {                ​

  5. ​        $("." + id).find("input[type='checkbox']").attr("checked", false);        ​

  6. ​    }​

  7. ​}​

第一遍勾选和取消是有效的,但是第二遍以后就没反应了,查看了属性,发现checked属性一直存在,但是没显示勾。就考虑移除checked属性看看。

  1. ​function check(id,check) {        ​

  2. ​    if (check) {                ​

  3. ​        $("." + id).find("input[type='checkbox']").attr("checked", true);        ​

  4. ​    } else {                ​

  5. ​        $("." + id).find("input[type='checkbox']").removeAttr("checked");        ​

  6. ​    }​

  7. ​}​

这次看到checked属性勾上有了,取消就没了,可是问题还是没解决,还是第二遍以后就没反应了。

可是我都用1.11的版本了,正确的做法是使用prop()方法设置checkbox的checked属性值。 

  1. ​function check(id,check) {        ​

  2. ​    if (check) {                ​

  3. ​        $("." + id).find("input[type='checkbox']").prop("checked", true);        ​

  4. ​    } else {                ​

  5. ​        $("." + id).find("input[type='checkbox']").prop("checked", false);        ​

  6. ​    }​

  7. ​}​

这个问题会出现的本质就是,jQuery中的attr()和prop()两个方法的使用区别。

具体请参考:


四、jQuery操作checkbox技巧总结

1、获取单个checkbox选中项的值(三种写法)

  1. ​$("#chx1").find("input:checkbox:checked").val()​

  2. ​//或者​

  3. ​$("#chx1").find("input:[type='checkbox']:checked").val();​

  4. ​$("#chx1").find("input[type='checkbox']:checked").val();​

  5. ​//或者​

  6. ​$("#chx1").find("input:[name='ck']:checked").val();​

  7. ​$("#chx1").find("input[name='ck']:checked").val();​

2、 获取多个checkbox选中项

  1. ​$("#chk1").find('input:checkbox').each(function() { //遍历所有复选框​

  2. ​    if ($(this).prop('checked') == true) {​

  3. ​        console.log($(this).val()); //打印当前选中的复选框的值​

  4. ​    }​

  5. ​});​

  6. ​function getCheckBoxVal(){ //jquery获取所有选中的复选框的值 ​

  7. ​    var chk_value =[]; ​

  8. ​    $("#chk1").find('input[name="test"]:checked').each(function(){ //遍历,将所有选中的值放到数组中​

  9. ​        chk_value.push($(this).val()); ​

  10. ​    }); ​

  11. ​    alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); ​

  12. ​} ​

3、设置第一个checkbox 为选中值

  1. ​$("#chk1").find('input:checkbox:first').prop("checked",true);​

  2. ​//或者​

  3. ​$("#chk1").find('input:checkbox').eq(0).prop("checked",true);​

4、设置最后一个checkbox为选中值

$("#chk1").find('input:checkbox:last').prop("checked",true);

jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等_复选框

5、根据索引值设置任意一个checkbox为选中值

  1. ​$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true);  //索引值=0,1,2.... ​

  2. ​//或者​

  3. ​$("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同时选中第0个和第1个checkbox​

//从索引0开始(包含),到索引2(不包含)的checkbox

jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等_复选框_02

6、根据value值设置checkbox为选中值

  1. ​$("#chk1").find("input:checkbox[value='1']").prop('checked',true);​

  2. ​$("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);​

7、删除checkbox:①删除value=1的checkbox ②删除第几个checkbox

  1. ​$("#chk1").find("input:checkbox[value='1']").remove(); //将匹配元素从DOM中删除,将标签从页面上删除了​

  2. ​$("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....​

  3. ​//如删除第3个checkbox:​

  4. ​$("#chk1").find("input:checkbox").eq(2).remove();​

8、全部选中或全部取消选中

  1. ​$("#chk1").find('input:checkbox').each(function() {​

  2. ​    $(this).prop('checked', true);​

  3. ​});​

  4. ​//或者​

  5. ​$("#chk1").find('input:checkbox').each(function () {​

  6. ​    $(this).prop('checked',false);​

  7. ​});​

9、选中所有奇数项或偶数项

  1. ​$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //选中所有偶数 ​

  2. ​$("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //选中所有奇数 ​

10、反选

方法一:

  1. ​$("#btn4").click(function(){ ​

  2. ​    $("input[type='checkbox']").each(function(){ //反选 ​

  3. ​         if($(this).prop("checked")){ ​

  4. ​             $(this).prop("checked",false); ​

  5. ​          } else{ ​

  6. ​             $(this).prop("checked",true); ​

  7. ​         } ​

  8. ​    });    ​

  9. ​}); ​

方法二:

  1. ​$("#btn4").on('click',function(){ ​

  2. ​//反选所有的复选框(没选中的改为选中,选中的改为取消选中)​

  3. ​    $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){​

  4. ​        return !oldValue;​

  5. ​    });​

  6. ​}​



梅花香自古寒来


举报

相关推荐

0 条评论