jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
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博客
欢迎点赞关注~~~
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等相关推荐
- JQuery实现复选框CheckBox的全选、反选、提交操作
对复选框最基本的应用,就是对复选框进行全选.反选和提交等操作.复杂的操作需要与选项挂钩,来达到各种级联反应效果. [示例]使用Jquery实现复选框CheckBox的全选.反选.提交操作. (1)创建 ...
- php 获取checkbox是否选中,javascript操作html复选框checkbox:如何判断复选框是否被选中...
(由www.169it.com搜集整理) 在PHP中,html复选框checkbox被选中,则提交的值是on,否则就是空,所以可以通过value值判断是否被选中.在JavaScript中,貌似不管您选 ...
- java 单选下拉_jQuery对单选框radio,复选框checkbox,下拉列表select的操作
获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本var item = $(" ...
- jquery设置复选框为只读_checkbox设置复选框的只读效果不让用户勾选
在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...
- MFC复选框CheckBox使用 ++
MFC中复选框checkbox控件,至少有四种方法对其进行操作, 第一种是利用Cbutton成员函数GetCheck和SetCheck, 第二种是利用CWnd成员函数IsDlgButtonChecke ...
- MFC复选框CheckBox使用
MFC中复选框checkbox控件,至少有三种方法对其进行操作,他们是利用Cbutton成员函数GetCheck和SetCheck,第二种是利用CWnd成员函数IsDlgButtonChecked,最 ...
- 【Qt】QTableView中嵌入复选框CheckBox 的四种方法总结
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...
- jQuery Mobile中复选框checkbox的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中复选框checkbox的data-*选项 带有 type="checkbox ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
最新文章
- struts启动时加载_iOS优化篇之App启动时间优化
- 数据仓库自动抽取:通过 SQL Server 企业管理器中的数据转换服务 (DTS) 设计器 创建 Analysis Services 处理任务...
- jvm系列(九):如何优化Java GC「译
- WPF中使用WindowChrome自定义窗口中遇到的最大化问题
- CentOS,重启的常用命令
- VS2008中使用JSONCPP方法小结
- 13、字符设备驱动的使用
- 数字化转型的四大工具模板
- Word宏的利用学习
- YAPI工具入门手册
- centos7 firefox 安装 java plugin方法
- Workman使用记录----
- 计算机显示器型号参数单价,飞利浦电脑显示器价格表一览【详解】
- LiveData的基本使用和原理解析
- 林轩田机器学习基石笔记6 - Theory of Generalization
- 编译器与Debug的传奇:Grace Murray Hopper小传
- 电子科技大学-高级计算机系统结构
- 我的编程之路:从好玩到玩好
- ROS教程(二):创建工作空间(图文)
- SDOI 2009 学校食堂(好难的状压QAQ