javascript和jquery复选框之checked属性

最新推荐文章于 2024-11-06 13:48:22 发布

转载最新推荐文章于 2024-11-06 13:48:22 发布 · 2.4k 阅读

·

1

·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/jf-67/p/6613898.html

本文深入探讨HTML中复选框checked属性的使用，解析其在不同情况下的表现，包括默认值、JavaScript和jQuery操作方式，以及如何正确获取复选框的选中状态。

今天无意中看到同事在学习复选框里面的checked属性的应用，当时看了一下，感觉熟悉而又陌生，发现checked属性其实还是挺奇怪的，感觉这里很有必要做一下笔记：

　　1、html中的checked属性。仔细研究下会发现一个很怪异的现象。

　　

　　你知道上面这四个复选框到底那些被选中了？那些没被选中吗？

　　其实乍一看我也不知道结果，运行完后也想不通为什么，查看资料才发现确实是那样的。

　　结果是：

　　

　　其实原理是这样的，复选框里只要有checked属性，不管是否为其赋值，结果为空或true或false或任意值，均为选中状态。

　　

　　2、利用javascript操作checked来控制复选框是否选中。

　　

　　结果：

　　

　　要使其不选中，即设置checked属性值为false。

　　3.利用jQuery操作checked来控制复选框选中与否。

　　

　　结果第一个复选框选中。

　　相反的，checked属性值设为false就是未选中了

　　

　　这里需注意：

　　无论是用javascript还是jQuery来操作checked属性，其值均为true或false，切忌带引号，否则会出错。

　　补充：获取复选框是否选中问题：

　　例如，有这样一个例子，我要获取这三个复选框是否选中：

1

2

3

<input type="checkbox" name="checkbox1" id="checkbox1" checked>看书

<input type="checkbox" name="checkbox2" id="checkbox2">电影

<input type="checkbox" name="checkbox3" id="checkbox3" checked>爬山

　　在js中，我们可以这样来写：

1

2

3

4

5

6

var checkbox1 = document.getElementById("checkbox1");

var checkbox2 = document.getElementById("checkbox2");

var checkbox3 = document.getElementById("checkbox3");

console.log(checkbox1.checked); // true

console.log(checkbox2.checked) // false

console.log(checkbox3.checked) // true

　　

　　在jQuery中，可以这样获取：

1

2

3

4

5

$(function(){

console.log($("#checkbox1").attr('checked')) // checked

console.log($("#checkbox2").attr('checked')) // undefined

console.log($("#checkbox3").attr('checked')) // checked

})

　　从上面例子可以看出同样是获取复选框是否选中，js的获取值是布尔值，即true 或者 false，而jQuery的获取值则是checked或者undefined

标签

#javascript #jquery #复选框 #checked属性 #前端开发

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。