checked属性只要存在,就会选中,无论其值是什么

最新推荐文章于 2024-08-25 08:00:25 发布
原创 最新推荐文章于 2024-08-25 08:00:25 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文探讨了HTML中input元素的checked属性行为。当checked属性存在时，不论其值是否为false，都会被视为已选中状态。此特性适用于inputcheckbox和inputradio类型。
如题. input checkbox和input radio都如此. 只有这个属性存在,就会认为是选中. 即使checked="false"
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
09-05
然而，不同浏览器之间对于HTML元素的解析和处理可能存在差异，其中IE浏览器就存在一个特定的问题，即在初始状态下无法通过`checked`属性正确设置`radio`或`checkbox`为选中状态。这个问题主要体现在`IE`的早期版本，...
jquery attr方法获取input的checked属性问题
10-25
对于`checked`属性，`prop("checked")`会返回一个布尔值，表示元素是否被选中。如果复选框被选中，它返回`true`，否则返回`false`。因此，当你需要检查或设置复选框的选中状态时，`prop`是更合适的选择。 来看以下...
checked属性 详解
kfgauss的博客
01-31 8326
https://www.cnblogs.com/mark5/p/11023851.html 注意：当元素中有checked属性时，其值无论是什么，都是被选中状态，那怎么才能让其不被选中呢，就是用jquery或js代码实现 　　1、html中的checked属性。仔细研究下会发现一个很怪异的现象。 　　 　　你知道上面这四个复选框到底那些被选中了？那些没被选中吗？ 　　其实乍一看我也不知道结果，运行完后也想不通为什么，查看资料才发现确实是那样的。 　　结果是： 　　 　　其实原理是..
checkbox的checked[property]和checked[attribute]区别
luojianbinfen的专栏
05-30 1502
checked="不管什么都是会选中"，这里的checked是attribute，html里只要有了checked就会选中。 而js控制选中的checked不是attribute(string)，而是properties(bool)。 这两个还是有区别的,这在jquery1.6+里已经很好诠释了。 非IE测试： var check = document.getElementById
前端对页面中的 checked 选中状态的展示
lzfengquan的博客
07-16 1751
项目中我们常常遇见多选，并且有场景要求 初次进入时展示全部的多选项，当选中后点击保存，在进来时，还是展示全部，但是要选中的默认选中， 这就要求前后台进行配合。 先看看页面效果 我们在主页面点击了场景项，进入场景页面进行选择并保存 当点击保存会返回到主页面 ，在进来时就默认选中了 在当我 点击主页面 的启用后，在点击主页面中的 场景 进来就是只展示选中的那几条 代码 ： 我们在页面中点击跳转页面的路由link地址 { title: '采购场景', align: 'cent
由:checkbox选择器展开的事情
weixin_33869377的博客
12-12 198
:checkbox的迷惑 1 之前选择checkbox喜欢使用jQuery(':checkbox')，为啥就是因为写起来方便。伪类选择器。 2 一直很想知道与jQuery('input[type="checkbox"]')的区别。觉得前者方便许多。于是到官网上查看 1 由上面截图...
浅析jquery与checkbox的checked属性的问题
11-23
使用 `$("#checkbox:checked")` 会选取所有被选中的复选框，这是一个方便的 jQuery 选择器，可以用于处理一组复选框中的选中项。 6. **设置 `checked` 属性** 要设置复选框的选中状态，`document.getElementById...
js表单元素checked、radio被选中的几种方法(详解)
10-21
这种方法会向元素添加`checked`属性，即使元素原本就没有这个属性。当`setAttribute`设置`checked`属性时，对应的元素会被选中。`lol.getAttribute("checked")`会返回`"checked"`，表明属性存在。 - **移除`...
jQuery中attr()和prop()在修改checked属性时的区别
12-10
所以，当你使用`prop('checked', true)`时，无论复选框的初始状态如何，它都会确保复选框被选中，并且在后续的交互中保持正确的行为。因此，当你需要改变`checked`属性时，应该使用`prop()`而不是`attr()`。 `prop...
checkbox中checked属性总结
Li370234940的博客
08-25 1132
1>.attr("checked") //返回："checked" 或 "undefined"2>.prop("checked") //返回 true/false。
input标签中checkbox中默认选中，有趣的checked
热门推荐
rusi__的博客
10-17 2万+
摘要 有时候我们设置复选框的时候需要使之默认选中，官方给的解释是要添加**checked=“checked”**这样一个属性，而事实上呢？ checked 可以 checked=“checked” 可以. checked=“1” 可以 checked=" " 可以 checked="0"可以 checked=“false”，都是可以的。 ------------。----------- 总结 ...
关于input中的checked属性
flybone7的博客
07-04 2万+
checked属性值是true还是checked 2019-1-7 18:05|作者:admin|查看:4657|评论: 0|来自: 蚂蚁部落 复选框标签具有checked属性，通过此属性可以设置复选框的选中状态。 非常简单的操作，但是还是有不少朋友存在后面类似的疑问，那就是不确定checked属性值是true还是checked。 因为两个属性值在实际代码中都有出现，并且都是有效...
【jQuery】:checked选中状态选择器
O(∩_∩)O
12-17 3377
有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。 例如，在表单中添加多个复选框和单选按钮，其中有一些元素处于选中状态，使用:checked获取并隐藏处于选中状态的元素，如下图所示： 在浏览器中显示的效果： 从图中可以看出，使用:checked选择器可以获取处于选
checkbox的checked属性怎么一直是true呢
最新发布
12-16
<think>我们正在讨论HTML中checkbox的checked属性问题。根据引用，当在HTML标签中设置了checked属性（无论其值是什么），复选框都会被选中，且其checked属性为true。但在JavaScript中操作时，情况可能不同。用户想知道为什么checked属性一直为true以及如何解决。 原因分析： 1. HTML特性：在HTML中，只要存在checked属性，无论值是什么（如`checked=""`、`checked="false"`），复选框都会显示为选中状态，且DOM元素的checked属性为true。这是因为checked属性是一个布尔属性，它的存在即表示true，不存在则为false。 2. JavaScript操作：在JavaScript中，我们通过操作DOM元素的property（属性）来改变其状态。例如，`element.checked = false;`可以取消选中。但注意，在jQuery中，1.6版本之后，对于checked这种property，应该使用`.prop()`方法而不是`.attr()`方法。 解决方案： 1. 在HTML中，不要随意添加checked属性，除非需要默认选中。如果需要默认不选中，则移除checked属性。 2. 在JavaScript中操作checked状态时，使用元素的property而不是attribute。在jQuery中，使用`.prop('checked', true/false)`来设置选中状态。 示例： 假设我们有一个复选框： ```html <input type="checkbox" id="myCheckbox"> ``` 在JavaScript中设置选中状态： ```javascript // 使用原生JavaScript document.getElementById('myCheckbox').checked = true; // 选中 document.getElementById('myCheckbox').checked = false; // 取消选中 // 使用jQuery $('#myCheckbox').prop('checked', true); // 选中 $('#myCheckbox').prop('checked', false); // 取消选中 ``` 注意：如果使用jQuery的`.attr()`方法来设置checked属性，可能会遇到问题，因为`.attr()`操作的是HTML属性（attribute），而`.prop()`操作的是DOM元素的属性（property）。在jQuery 1.6之后，对于布尔属性（如checked, selected, disabled）应使用`.prop()`。 如果用户发现复选框的checked属性一直为true，可能是因为： - 在HTML中始终存在checked属性（即使值为false）。 - 在JavaScript中错误地使用了`.attr()`方法，而应该使用`.prop()`。 因此，检查HTML代码中是否有checked属性，并确保在JavaScript中使用正确的方法来操作。 另外，引用[2]提到了indeterminate属性，这是一个独立属性，只影响外观，不影响checked属性的值。如果需要设置半选状态，可以使用`element.indeterminate = true;`，但这不会改变checked属性的值。 总结：确保在HTML中正确使用checked属性（需要默认选中时才添加），在JavaScript中使用`.prop()`（jQuery）或直接操作checked属性（原生JS）来改变选中状态。 相关问题： 1. 在HTML中，如何设置复选框的默认选中状态？ 2. 如何使用JavaScript动态改变复选框的选中状态？ 3. jQuery中`.prop()`和`.attr()`方法在处理复选框选中状态时有什么区别？ </think> ### Checkbox的`checked`属性一直为`true`的原因及解决方案 #### 问题原因 1. **HTML特性规则** 在HTML中，只要存在`checked`属性（无论其值是什么），复选框即被认定为选中状态[^3]。例如： - `<input type="checkbox" checked>` → 选中 - `<input type="checkbox" checked="false">` → 仍为选中（属性值被忽略） 这是因为`checked`是**布尔属性**，其存在即表示`true`，不存在则为`false`。 2. **JavaScript操作差异** 通过JavaScript操作`checked`属性时，行为与HTML不同： ```javascript // 原生JS操作（正确） checkbox.checked = false; // 可取消选中 // jQuery错误操作 $("#cb").attr("checked", false); // 无效！仍可能被识别为true ``` 引用[4]指出：`checked`是DOM元素的**property**（特性），而非HTML **attribute**（属性）。使用`.attr()`方法操作无法正确修改其状态[^4]。 3. **`indeterminate`属性干扰** 引用[2]提到：`indeterminate`是独立属性（如半选状态），但它**不影响实际值**，可能造成视觉与状态不一致的误解[^2]。 --- #### 解决方案 1. **HTML中正确移除选中状态** 确保不需要默认选中时**完全移除`checked`属性**： ```html <!-- 默认不选中 --> <input type="checkbox"> <!-- 默认选中 --> <input type="checkbox" checked> ``` 2. **JavaScript/jQuery操作规范** - **原生JavaScript**：直接操作`checked` property ```javascript // 设置选中 document.getElementById("cb").checked = true; // 取消选中 document.getElementById("cb").checked = false; ``` - **jQuery**：使用`.prop()`而非`.attr()` ```javascript // 正确：设置选中 $("#cb").prop("checked", true); // 正确：取消选中 $("#cb").prop("checked", false); ``` 3. **状态检测方法** 始终通过`.checked` property检测状态（而非HTML属性）： ```javascript if (document.getElementById("cb").checked) { console.log("复选框已选中"); } ``` --- #### 关键总结 | 操作场景 | 正确方式 | 错误方式 | |-----------------|-----------------------------|------------------------| | **HTML设置** | 无默认选中时省略`checked`属性 | `checked="false"` | | **JS修改状态** | `element.checked = [布尔值]` | `element.setAttribute("checked", ...)` | | **jQuery修改** | `.prop("checked", [布尔值])` | `.attr("checked", ...)` | > 遵循以上规则可避免`checked`属性始终为`true`的问题。核心原则：**HTML中`checked`是存在性属性，JS中需操作DOM property**[^1][^3]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值