当前位置:网站首页>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
边栏推荐
- A JS script can be directly put into the browser to perform operations
- Ue4/ue5 multi thread development attachment plug-in download address
- Virtual memory, physical memory /ram what
- ./ Functions of configure, make and make install
- After UE4 is packaged, mesh has no material problem
- 过度依赖补助,大客户收款难,冲刺“国产数据库第一股”的达梦后劲有多足?
- 神经网络c语言中的指针是怎么回事
- 一个普通人除了去工厂上班赚钱,还能干什么工作?
- Webgl texture
- Spin animation of Cocos performance optimization
猜你喜欢
Mesh merging under ue4/ue5 runtime
webgl_ Enter the three-dimensional world (2)
When opening the system window under UE4 shipping, the problem of crash is attached with the plug-in download address
LeetCode3_ Longest substring without duplicate characters
TS as a general cache method
Numpy --- basic learning notes
Cut ffmpeg as needed, and use emscripten to compile and run
【花雕体验】15 尝试搭建Beetle ESP32 C3之Arduino开发环境
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"?
MySQL数据库基本操作-DQL-基本查询
随机推荐
OpenGL's distinction and understanding of VAO, VBO and EBO
U3D_ Infinite Bessel curve
20th anniversary of agile: a failed uprising
Shader Language
讲师征集令 | Apache SeaTunnel(Incubating) Meetup 分享嘉宾火热招募中!
Three. JS introductory learning notes 10:three JS grid
AB package details in unity (super detail, features, packaging, loading, manager)
LeetCode1_ Sum of two numbers
MySQL数据库基本操作-DQL-基本查询
Vertex shader to slice shader procedure, varying variable
Write sequence frame animation with shader
Introduction to pyGame games
Learn good-looking custom scroll bars in 1 minute
Three. Introduction to JS learning notes 17: mouse control of 3D model rotation of JSON file
asyncio 概念和用法
Streaming end, server end, player end
Getting started with webgl (3)
企业级日志分析系统ELK
Numpy -- epidemic data analysis case
LeetCode2_ Add two numbers