复选框checkbox如何判定为被选中
近期,我在开发网站的考试系统时,遇到了一个关于复选框checkbox如何判定为被选中的问题。网上的说法很多,但是没有说到重点上的,而这篇文章解释的很详细,于是,我把它记录下来。原始博客地址:http://www.cnblogs.com/circulatttt/p/5193262.html
要想判定复选框选中状态可以使用:
$("#test1").prop("checked")和$("#test1").is(":checked")
1、checkbox中的checked属性
1.1 如果对于input标签,不设置其checked属性的话,默认是该复选框不被选中;
<input type="checkbox" name="test" id="test"/> //未被选中
1.2 而如果设置了checked属性的话,本人在js中测试的时候;
1)将checked属性设置为checked=true或者checked=”true”或者checked=”false”时,系统都会认为是该复选框被选中了。
<input type="checkbox" name="test" id="test1"/ checked=true> //选中
<input type="checkbox" name="test" id="test2"/ checked="true"> //选中
<input type="checkbox" name="test" id="test3"/ checked="false"> //选中
<input type="checkbox" name="test" id="test4"/ checked > //选中
2)在测试的时候,将checked属性设置为checked=false时,系统还是认为该复选框是未被选中的;
<input type="checkbox" name="test" id="test5"/ checked=false> //未被选中
★★★但是,当我们将checked属性设置为checked=false时,虽然在显示的时候,该复选框呈现的时候是未被选中,但是,如果我们使用如下代码的时候:
$("#test").prop("checked")以及$("#test").is(":checked")
得到的值还是true(选中)。
2、使用 (.val())取值 —–不能用来判断复选框选中状态
<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked=true> //选中
我们使用console.log()将checked的取值打印出来,得到的结果如下:
无论是选中状态还是未被选中的状态,其取出的值都为on,所以要判定checkbox的选中状态,不能使用.val()取值
console.log($("#test").val()) //打印出on
console.log($("#test1").val()) //打印出on
3、使用(.attr())取属性值 —–不能用来判断复选框选中状态
<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked> //选中
我们使用console.log()将checked的取值打印出来,得到的结果如下:
无论是选中状态还是未被选中的状态,其取出的值都为undefine,所以要判定checkbox的选中状态,不能使用.attr()取值
console.log($("#test").attr()) //打印出undefine
console.log($("#test1").attr()) //打印出undefine
4、使用(.prop())获取当前状态 ——可以用来判断复选框选中状态
<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked> //选中
我们使用console.log()将checked的取值打印出来,得到的结果如下:
选中的状态就得到true,未被选中的状态就得到false,所以要判定checkbox的选中状态,可以使用.prop()取值
onsole.log($("#test").prop("checked")) //打印出false
console.log($("#test1").prop("checked")) //打印出true
5、使用(.is())—-可用来判断复选框选中状态
<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked> //选中
使用$(“input[type=’checkbox’]”).is(‘:checked’)语句,通过使用console.log()将checked的取值打印出来,得到的结果如下:
选中的状态就得到true,未被选中的状态就得到false,所以要判定checkbox的选中状态,可以使用.is()取值
console.log($("#test").is(":checked")) //打印出false
console.log($("#test1").is(":checked")) //打印出true
喜欢的可以点个赞,有什么问题可以在底下向我提问,谢谢大家支持!
复选框checkbox如何判定为被选中相关推荐
- js中复选框checkbox如何判定为被选中
在学习的过程中触及到html分离式开发的内容,其中复选框checkbox判定选中对于ajax传数据来说十分重要,故将该篇文章转发留存,方便以后查阅. 要想判定复选框选中状态可以使用: $(" ...
- php 获取checkbox是否选中,javascript操作html复选框checkbox:如何判断复选框是否被选中...
(由www.169it.com搜集整理) 在PHP中,html复选框checkbox被选中,则提交的值是on,否则就是空,所以可以通过value值判断是否被选中.在JavaScript中,貌似不管您选 ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
- html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
- 使用easyui框架form控件,单选按钮radio或复选框checkbox样式问题
为什么80%的码农都做不了架构师?>>> easyui只提供了textbox文本框,未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio ...
- MFC复选框CheckBox使用 ++
MFC中复选框checkbox控件,至少有四种方法对其进行操作, 第一种是利用Cbutton成员函数GetCheck和SetCheck, 第二种是利用CWnd成员函数IsDlgButtonChecke ...
- MFC复选框CheckBox使用
MFC中复选框checkbox控件,至少有三种方法对其进行操作,他们是利用Cbutton成员函数GetCheck和SetCheck,第二种是利用CWnd成员函数IsDlgButtonChecked,最 ...
- bootstrap带有下拉按钮的输入框_关于bootstrap--表单(下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio)...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
- flutter 开关Switch与复选框Checkbox
Flutter 移动跨平台开发技术分享 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒 [x1]点击查看提示 [x2]各种系列的教程 [x3]Flutter文章积累目录 ...
最新文章
- Excel的合并解析
- a标签跳页传参,以及截取URL参数
- power bi tutorial within Unilever
- Ruby BigDecimal库拒绝服务漏洞
- Effective Java 英文 第二版 读书笔记 Item 14:In public classes,use accessor methods,not public fields...
- matplotlib的colorbar自定义刻度范围
- 求解模糊运动角度matlab,动态模糊图像复原MATLAB程序
- 网络安全系列之五十四 为GRUB引导菜单设置密码
- 初始化与赋值哪个效率高?
- python while true循环_python学习——while True的用法
- VS编译错误:winsock.h winsock2.h ws2def.h 重定义
- leetCode-458. Poor Pigs
- 实验七-卷积编码的MATLAB实现
- 3月25日E盾网络验证最新修复一机一码E盾网络验证成品源码加密系统
- 蓝桥杯:国二选手经验贴 附蓝桥杯历年真题
- 大功率双路直流电机驱动板的设计源文件
- html div区域划分、居中各种前端技巧笔记
- 后端如何编写API文档给到前端?
- c语言资料大全收集,C语言库函数大全(收集资料).pdf
- Password Management: Hardcoded Password
热门文章
- Linux磁盘故障和文件系统修复(救援模式Centos7、Centos8)
- 盘点2019年十大泡沫经济事件:今年哪个行业有点衰?
- Dell 服务器错误代码
- 市北·GMIS 2019 全球数据智能峰会全记录
- Eclipse IDE for Java EE Developers 去哪里了?
- Eclipse Other Projects
- 真相:为什么投简历总是没回音?
- 2020CCPC绵阳K.Knowledge is Power(互质数分解)+两数互质规律总结
- SEO之网站快速被收录
- OOM系列之一:java.lang.OutOfMemoryError: Java堆空间问题详解