如何检查具有布尔值的复选框答案

【问题标题】：How to check a checkbox with boolean values如何检查具有布尔值的复选框
【发布时间】：2015-01-09 10:40:27
【问题描述】：

因此，HTML 规范说您应该在 <input type="checkbox"> 标记中添加一个 checked 属性以将其标记为已选中。但我只有一个布尔值 true 或 false 值。

按照设计，在布尔值被解析为 html 之前，我不能向它添加任何逻辑 :(。是否可以仅使用 html 或 js 在加载时检查具有布尔值的复选框？我尝试了以下，但onload 似乎没有触发：

<input type="checkbox" onload="javascript:this.checked=true" />

我知道我可以在 jQuery 中做这样的事情：

$("[checked='false']").prop('checked',false)

我正在寻找一种优雅的方法来解决它。这必须解析整个 DOM-Tree 并且会减慢我的页面速度。

编辑（试图解释）：

在我的公司中，存在一个按设计执行以下操作的应用程序：

 <input type="checkbox" checked="%IsValide%" >

服务器会自动将%IsValide% var 替换为数据库值。这里真假。但是，即使值为 false，也始终选中该复选框。我知道这是因为 html5 的设计：checked="true" 和 checked="false" 会将复选框始终标记为已选中。

现在我正在寻找一种解决方案，使用来自%IsValide% 的真值或假值来使用 javascript（或者更好的是，使用 html。）正确选中该框。我可以在 html 标签的任何位置使用%IsValide%。例如：

<input type="checkbox" onload="javascript:this.checked=%IsValide%" />

但我不能在它被解析为 HTML 之前添加逻辑，如下所示：

if(%IsValide%) {
 %IsValide%="checked";
}
else {
 %IsValide%="";
}

【问题讨论】：

【解决方案1】：

我想了解您的要求。我想你可以用一些简单的 javascript 来完成它：

document.getElementById("yourCheckBoxId").checked = false; //this case it sets checked to false you can also do true

在页面加载时检查它：

<body onload='document.getElementById("yourCheckBoxId").checked = true;'>

或者避免使用 onload 属性来检查 body 这样做：

<input type="checkbox" id="yourCheckBoxId" checked>

然后你只需用 javascript 更改它。

我的另一个猜测是您想更改复选框的值？你是？在我的答案下方发表评论说我不明白你在问什么。希望这可以帮助！这是我的参考来源：http://www.w3schools.com/jsref/prop_checkbox_checked.asp

【讨论】：

我正要发布与此答案几乎相同的答案。但是，网页上可能会有多个复选框。所以，每一个都需要不同的id，但是body标签的onload JavaScript文本也需要不同的Server-variable标识符，比如："onload=document.getElementById('cb01').checked=%IsValide1%;document.getElementById('cb02').checked=%IsValide2%;"等
谢谢，我会看看。但是，您可以只做一个循环并创建和访问复选框。

【解决方案2】：

如果您公司的应用程序设置了checked="true" 或checked="false"，如您所见，这无关紧要，因为checked 是一个布尔属性，并且“此布尔属性的存在表明该控件被默认选中”，并且复选框将始终被选中。

这应该可以解决它：

$('input[checked="false"]').prop('checked',false)

【讨论】：

正如我所说的不完全是我要搜索的内容（因为需要搜索整个 DOM）但是当没有其他方法可以使用时，我会使用它。
“搜索整个 DOM”是什么意思？
$('input[checked="false"]') 这将搜索页面上的每个输入元素。所以浏览器 JS 引擎会遍历整个 DOM-Tree 并搜索它。虽然例如这个<input type="checkbox" onclick="javascript:this.checked=true" /> 不需要搜索树，还是我错了？
是的，您的内联 JS 示例将仅在该一个元素上执行，而 jQuery 将选择页面上所有已选中的输入（但不是所有输入元素）。但除非你有成千上万个复选框，否则我怀疑你甚至会注意到使用 jQuery（或普通的 vanilla JS 等效项）会降低性能。

【解决方案3】：

我认为最终你会以错误的方式解决这个问题，但如果我 没有其他选择就像你说的那样，我认为你最终会得到最好的（性能方面）将在您的输入中添加一个类（真或假）

<input type="checkbox" class="tocheck-true"></input>
<input type="checkbox" class="tocheck-false"></input>

然后寻找那个类：

$("input.tocheck-true").prop("checked",true);

因为我们只搜索具有该 css 类的输入，所以它应该执行得非常好。

但是，再一次，这似乎是一个完整的 hack。如果您问“我如何使用胶带将发动机固定到我的汽车车身上”，也许您应该停下来看看您是否应该问这个问题。 :)

【讨论】：