复选框设置为选中 = false 不起作用

Posted 2023-02-22

【中文标题】复选框设置为选中 = false 不起作用

【英文标题】：checkbox set to checked = false not working

【发布时间】：2014-08-22 06:24:54

【问题描述】：

我正在使用checked="false" 生成一个 html 输入，但是该复选框显示为选中状态。

我在 javascript 控制台中执行了以下操作，但无法弄清楚发生了什么。使用 .prop() 将值设置为 false 后生成的 HTML 看起来相同，但现在未在表单上选中复选框。

> $(':input[checked]').prop('checked');
< true
> $(':input[checked]')
< [
<input type=​"checkbox" class=​"caseVal" checked=​"false">​
]
> $(':input[checked]').prop('checked',false);
< [
<input type=​"checkbox" class=​"caseVal" checked=​"false">​
]

我的印象是我应该设置 checked="checked" 或者根本不包括选中的属性，如果它是错误的，那是最佳做法吗？无论哪种方式，我都想知道上面的代码发生了什么。

【问题讨论】：

正确包含，错误省略 <input type="checkbox" checked="checked" /> <input type="checkbox" />

你的例子对我有用jsfiddle.net/j08691/qSSa8。您只是查看控制台输出还是实际的 DOM 渲染？你试过.removeAttr()吗？

查看prop() vs attr()

What is the syntax for boolean attributes, e.g. a checked checkbox, in HTML?的可能重复

prop() 不会更新 HTML，只会更新 DOM。如果您之后要检查 HTML，请使用 attr() 或 removeAttr()

【参考方案1】：

在这种情况下如何取消选中，例如我的代码是：（见下文）

if(previousHighlightedCheckbox!=null) 
    console.log(sent.id, previousHighlightedCheckbox); // current checkbox and previous check box values are different.
    document.getElementById(previousHighlightedCheckbox).checked = false; // still this does not uncheck previous one
   

【参考方案2】：

不要放checked="false"

你只为有效的 XHTML 设置了checked="checked"，否则你会这样做

<input type="checkbox" checked>

浏览器并不关心为checked属性分配了什么值，只要在复选框输入标签中看到checked，它就会被标记为已选中。

【讨论】：

好的，谢谢。只要系统允许，我就会接受。