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

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

转载:https://blog.csdn.net/chenchunlin526/article/details/77448168

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是否是选中状态的三种方法:
.attr(‘checked’) // 返回:”checked”或”undefined” ;
.prop(‘checked’) // 返回true/false
.is(‘:checked’)  // 返回true/false //别忘记冒号哦

2、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”); //不标准

三、标签中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中的attr()和prop()两个方法的使用区别。
具体请参考:
jQuery中的attr()与prop()设置属性、获取属性的区别 – chunlynn的小屋 – CSDN博客
http://blog.csdn.net/chenchunlin526/article/details/77426796  

四、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); //选中所有奇数 

10、反选
方法一:
$(“#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;
    });
}

本系列其他相关文章:
【1】jQuery中的attr()与prop()设置属性、获取属性的区别 – chunlynn的小屋 – CSDN博客
【2】<a>标签中 href 和 onclick 的区别,以及 onclick(this) 传递this参数详解 – chunlynn的小屋 – CSDN博客
【3】jQuery的removeProp()与removeAttr()移除属性的区别 – chunlynn的小屋 – CSDN博客

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112376.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号