你真的了解checkbox的用法吗?
checkbox的用法
- 一、checked属性定义
- 1、HTML之 `` 标签的 checked 属性
- 定义和用法
- HTML 4.01 与 HTML5之间的差异
- HTML 与 XHTML 之间的差异
- 二、checked属性的用法
- 1、jQuery判断checked是否是选中状态的三种方法:
- 2、jQuery赋值checked的几种写法:
- 3、jQuery的prop()的4种赋值(推荐如下写法):
- 三、标签中checked="checked"已有,但却不显示打勾的解决办法
- 四、jQuery操作checkbox技巧总结
- 1、获取单个checkbox选中项的值(三种写法)
- 2、 获取多个checkbox选中项
- 3、设置第一个checkbox 为选中值
- 4、设置最后一个checkbox为选中值
- 5、根据索引值设置任意一个checkbox为选中值
- 6、根据value值设置checkbox为选中值
- 7、删除checkbox:①删除value=1的checkbox ②删除第几个checkbox
- 8、全部选中或全部取消选中
- 9、选中所有奇数项或偶数项
- 10、反选
一、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(){ 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中的attr()和prop()两个方法的使用区别
四、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,1,2.... //或者$("#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,1,2....//如删除第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;});
}
你真的了解checkbox的用法吗?相关推荐
- checkbox选中用法以及获取未选中的checkbox
一.checkbox选中用法 问题:如果一个select的改变事件的选中的值改变,那么相应的复选框也要选中或者取消, $("#isfourfive").change(functio ...
- ionic checkbox 精简用法
在网上,看到大多数用法如下: "`js <li class="item item-checkbox item-checkbox-right"><labe ...
- 《uni-app》表单组件-Checkbox组件
本文分享的checkbox组件为uni-app的内置组件checkbox,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组 ...
- JQuery 选择器。
• #id • element • .class • .class.cl ...
- Android 应用软件开发(九)控件续
TextView EditBox Button RadioGroup RadioBox CheckBox ProgressBar ListView 下面是关于RadioBox和CheckBox的用法 ...
- 电脑home键在哪_如何灵活使用电脑键盘上的各个键
电脑上的键有很多但是你真的了解它们的用法么,今天笔者给大家分享一下电脑键盘上各个键的作用. 区域一:共有13个按键,ESC,F1-F2. F1:帮助信息. F2:选定一个文件或文件夹.按下F2可以重命 ...
- 细数sass安装中遇到的坑
前言: 前两天打算清理电脑的时候,遇到了一点特殊的问题,打算重装一些东西,其中就有我一直用的顺手的SASS预编译工具. 但是在重装的时候,我发现我居然不会用了??? 靠,要不是我用了半年的Sass,我 ...
- 同一表单内设置两个或两个以上的提交按钮 Two submit buttons in one form
给相同 name就可以了, 类似radio的和checkbox的用法: You can give each input a different value and keep the same name ...
- [转] jQuery 选择器
jQuery选择器(Selectors,或译为选择符?)可以说是甚为强大,jQuery能够得以如此之名气,选择器的功劳是功不可没的.利用 CSS和XPath选择符的能力,加上自己的"自定义选 ...
最新文章
- mysql+join+分库分表_MySQL分库分表篇
- cesium鼠标控制键盘_用 Python 控制 鼠标和键盘,花式操作
- Struts2 为什么被淘汰?自己作死!
- [云炬创业基础笔记]第五章创业机会评估测试1
- css 中 的作用
- 深入理解计算机底层为什么采用补码运算【如何理解二进制计算高位溢出】
- DCMTK:查询/检索服务类用户(C-GET操作)
- python 内置模块 subprocess
- jsonrpc aria2_抛弃迅雷,Aria2 新手入门
- 测试环境搭建:CentOS7环境装JDK+Nginx+Redis+MySql
- 数组中常用几种的Arrays方法
- 20190911-代码生成器生成表单
- 解决Xcode 9.x 没有代码提示
- 微信公众号开发之网页授权
- 唱歌发声的基础知识与训练方法
- 泰斗 GPS模块调试(1)
- new Object()和Object.create()的区别
- linux shell脚本退出,Bash退出命令和退出代码
- 我敢说80% 的程序员都掉进了「老鼠赛跑」的陷阱
- PyTorch GPU环境搭建 【Winds10 + Python3.6 + CUDA10.0 + PyTorch 0.4.1 (PyTroch 1.0 branch)】
热门文章
- 数电课设 八路抢答器设计详解
- 男人的一生,什么最重要?
- Ubuntu20.04配置网络唤醒
- Swift之扩展的使用和实例展示
- LibGDX游戏引擎-懒人三行代码解决中文绘制
- 【璟丰机电】Parker派克高速伺服电机MGV NV技术优势详解
- SAC-IA粗配准+ICP精配准
- 硬盘 本次操作由于计算机的限制,右键出现本次操作由于这台计算机的限制而被取消 win7 - 小众知识...
- 上交所回应“科创板受理企业科技含量不高”:会在审核问询环节对企业进行多轮问询...
- vbscript 连接mysql_vbscript连接操作mysql