js中复选框checkbox如何判定为被选中
在学习的过程中触及到html分离式开发的内容,其中复选框checkbox判定选中对于ajax传数据来说十分重要,故将该篇文章转发留存,方便以后查阅。
要想判定复选框选中状态可以使用:
$("#test1").prop("checked")和$("#test1").is(":checked")1
1、checkbox中的checked属性
1.1 如果对于input标签,不设置其checked属性的话,默认是该复选框不被选中;
<input type="checkbox" name="test" id="test"/> //未被选中1
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 > //选中1234
2)在测试的时候,将checked属性设置为checked=false时,系统还是认为该复选框是未被选中的;
<input type="checkbox" name="test" id="test5"/ checked=false> //未被选中1
★★★但是,当我们将checked属性设置为checked=false时,虽然在显示的时候,该复选框呈现的时候是未被选中,但是,如果我们使用如下代码的时候:
$("#test").prop("checked")以及$("#test").is(":checked")1
得到的值还是true(选中)。
2、使用 (.val())取值 —–不能用来判断复选框选中状态
<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked=true> //选中12
我们使用console.log()将checked的取值打印出来,得到的结果如下:
无论是选中状态还是未被选中的状态,其取出的值都为on,所以要判定checkbox的选中状态,不能使用.val()取值
console.log($("#test").val()) //打印出on
console.log($("#test1").val()) //打印出on12
3、使用(.attr())取属性值 —–不能用来判断复选框选中状态
<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked> //选中12
我们使用console.log()将checked的取值打印出来,得到的结果如下:
无论是选中状态还是未被选中的状态,其取出的值都为undefine,所以要判定checkbox的选中状态,不能使用.attr()取值
1
console.log($("#test").attr()) //打印出undefine
console.log($("#test1").attr()) //打印出undefine12
4、使用(.prop())获取当前状态 ——可以用来判断复选框选中状态
<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked> //选中12
我们使用console.log()将checked的取值打印出来,得到的结果如下:
选中的状态就得到true,未被选中的状态就得到false,所以要判定checkbox的选中状态,可以使用.prop()取值
onsole.log($("#test").prop("checked")) //打印出false
console.log($("#test1").prop("checked")) //打印出true12
5、使用(.is())—-可用来判断复选框选中状态
<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked> //选中12
使用$(“input[type=’checkbox’]”).is(‘:checked’)语句,通过使用console.log()将checked的取值打印出来,得到的结果如下:
选中的状态就得到true,未被选中的状态就得到false,所以要判定checkbox的选中状态,可以使用.is()取值
console.log($("#test").is(":checked")) //打印出false
console.log($("#test1").is(":checked")) //打印出true
js中复选框checkbox如何判定为被选中相关推荐
- 复选框checkbox如何判定为被选中
近期,我在开发网站的考试系统时,遇到了一个关于复选框checkbox如何判定为被选中的问题.网上的说法很多,但是没有说到重点上的,而这篇文章解释的很详细,于是,我把它记录下来.原始博客地址:http: ...
- elementUI中复选框checkbox的使用
elementUI中复选框checkbox的使用 <template><div style="padding:20px;"><el-card>& ...
- jQuery Mobile中复选框checkbox的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中复选框checkbox的data-*选项 带有 type="checkbox ...
- js——全选框 checkbox
一直会碰见input 全选框的问题,先整理一种情况: 1. <input id="selectAll" type="checkbox" />全选 2 ...
- layui 实现表单、表格中复选框checkbox的全选功能
一.layui 实现表单中多选框的全选功能,代码如下: //html页面表单 <form class="layui-form"><div class=" ...
- MFC复选框CheckBox使用 ++
MFC中复选框checkbox控件,至少有四种方法对其进行操作, 第一种是利用Cbutton成员函数GetCheck和SetCheck, 第二种是利用CWnd成员函数IsDlgButtonChecke ...
- MFC复选框CheckBox使用
MFC中复选框checkbox控件,至少有三种方法对其进行操作,他们是利用Cbutton成员函数GetCheck和SetCheck,第二种是利用CWnd成员函数IsDlgButtonChecked,最 ...
- js、jquery操作复选框checkbox总结(单个/多个获取选中值、初始化设置默认选中值、全选反选)
一.单个复选框 使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
- [Ext JS] 3.5 单选框 Radio与复选框CheckBox
Radio 与Checkbox Radio 单选框,意思是当有一组同名的单选框时,一次只能选择一个.有单选框,也就有复选框(checkbox),对应的复选框就可以选择多个. Radio 和 Check ...
最新文章
- 刘宇与小白健康:一个理想主义者的互联网“众包”实践
- [产品设计]为什么目前的运动手表的产品设计是错的?
- Asp.net Web API实战
- 你以为妹子穿短裙真的是为了诱惑你吗?
- 【Kafka】kafka replication factor : 3 larger than avaiable brokers:2
- 扎克伯格靠AI挺过危机,Facebook满血复活还需3年
- npm修改全局包安装路径
- google protobuf windows下环境配置
- [Angular 2] Transclusion in Angular 2
- 更新一些CAD中比较容易混淆的概念
- 一对一高清直播系统解决方案
- Kubernetes(七)Pod进阶之Downward API和PodPreset
- 从零开始搭建自己的网站一:整体步骤
- 解决运行roscore时出现报错问题
- 运行adb 命令提示more than one device/emulator
- 一篇文章读完50篇摄影教程(托马斯的2016总结)
- BEEF的使用(简单版)
- Task5 基于深度学习的文本分类2
- TCPMP中的Splitter机制
- 【sql语句中的符号】(通配符+#{}+${})