当前位置:网站首页>js中复选框checkbox如何判定为被选中
js中复选框checkbox如何判定为被选中
2022-07-07 13:53:00 【爱学习的大雄】
在学习的过程中触及到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
边栏推荐
- 2022山东智慧养老展,适老穿戴设备展,养老展,山东老博会
- Cut ffmpeg as needed, and use emscripten to compile and run
- 10 schemes to ensure interface data security
- After UE4 is packaged, mesh has no material problem
- You Yuxi, coming!
- JS array foreach source code parsing
- Three. JS introductory learning notes 07: external model import -c4d to JSON file for web pages -fbx import
- [wechat applet] Chapter (5): basic API interface of wechat applet
- Enterprise log analysis system elk
- Shader basic UV operations, translation, rotation, scaling
猜你喜欢
Three. JS introductory learning notes 04: external model import - no material obj model
numpy--数据清洗
How does geojson data merge the boundaries of regions?
Apache Doris刚“毕业”:为什么应关注这种SQL数据仓库?
AE learning 01: AE complete project summary
Annexb and avcc are two methods of data segmentation in decoding
Enterprise log analysis system elk
Three. JS introductory learning notes 15: threejs frame animation module
Excessive dependence on subsidies, difficult collection of key customers, and how strong is the potential to reach the dream of "the first share of domestic databases"?
Shipping companies' AI products are mature, standardized and applied on a large scale. CIMC, the global leader in port and shipping AI / container AI, has built a benchmark for international shipping
随机推荐
Migration and reprint
Numpy --- basic learning notes
Particle effect for ugui
Unity的三种单例模式(饿汉,懒汉,MonoBehaviour)
Bidding announcement: Fujian Rural Credit Union database audit system procurement project (re bidding)
How to implement backspace in shell
Enterprise log analysis system elk
JS array foreach source code parsing
Vertex shader to slice shader procedure, varying variable
numpy--数据清洗
TS typescript type declaration special declaration field number is handled when the key key
webgl_ Enter the three-dimensional world (2)
Introduction to pyGame games
A link opens the applet code. After compilation, it is easy to understand
喜讯!科蓝SUNDB数据库与鸿数科技隐私数据保护管理软件完成兼容性适配
LeetCode1_ Sum of two numbers
AE learning 02: timeline
Three. JS introduction learning notes 12: the model moves along any trajectory line
TS as a general cache method
Three. JS introductory learning notes 15: threejs frame animation module