当前位置:网站首页>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山东智慧养老展,适老穿戴设备展,养老展,山东老博会
- A JS script can be directly put into the browser to perform operations
- Strengthen real-time data management, and the British software helps the security construction of the medical insurance platform
- Numpy --- basic learning notes
- 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
- Detailed explanation of unity hot update knowledge points and introduction to common solution principles
- Three. JS introductory learning notes 05: external model import -c4d into JSON file for web pages
- Syntax of generator function (state machine)
- OpenGL's distinction and understanding of VAO, VBO and EBO
- Step by step monitoring platform ZABBIX
猜你喜欢
强化实时数据管理,英方软件助力医保平台安全建设
2022第四届中国(济南)国际智慧养老产业展览会,山东老博会
Annexb and avcc are two methods of data segmentation in decoding
What about the pointer in neural network C language
2022 the 4th China (Jinan) International Smart elderly care industry exhibition, Shandong old age Expo
Notification uses full resolution
Cocos creator collision and collision callback do not take effect
Three. JS introductory learning notes 15: threejs frame animation module
C4D learning notes 2- animation - timeline and time function
Numpy -- data cleaning
随机推荐
Syntax of generator function (state machine)
Three. JS introductory learning notes 05: external model import -c4d into JSON file for web pages
47_Opencv中的轮廓查找 cv::findContours()
torch.numel作用
AE learning 02: timeline
Shader Language
过度依赖补助,大客户收款难,冲刺“国产数据库第一股”的达梦后劲有多足?
航运船公司人工智能AI产品成熟化标准化规模应用,全球港航人工智能/集装箱人工智能领军者CIMC中集飞瞳,打造国际航运智能化标杆
Three. JS introductory learning notes 07: external model import -c4d to JSON file for web pages -fbx import
Numpy --- basic learning notes
Is it reliable to open an account on Tongda letter with your mobile phone? Is there any potential safety hazard in such stock speculation
Asynchronous application of generator function
Three. JS introduction learning notes 12: the model moves along any trajectory line
Apache Doris just "graduated": why should we pay attention to this kind of SQL data warehouse?
Vite path alias @ configuration
Migration and reprint
numpy--数据清洗
The unity vector rotates at a point
Introduction to pyGame games
VS2005 strange breakpoint is invalid or member variable value cannot be viewed