如何检查具有布尔值的复选框
Posted
技术标签:
【中文标题】如何检查具有布尔值的复选框【英文标题】：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%="";
【问题讨论】：
所以<input type="checkbox" checked /> 不适合你？
抱歉，我仍然不清楚问题/问题是什么。
无论您从数据库中获得什么，都在服务器端，对吧？然后就可以使用服务端逻辑了。
为什么不能“添加逻辑”？如果你不能用它来做这样合乎逻辑的事情，为什么还要用 JavaScript/jQuery 标记这个问题？
我很想知道将 %IsValid% 替换为 true 的是什么？您的服务器端语言是什么？
【参考方案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)
jsFiddle example
【讨论】：
正如我所说的不完全是我要搜索的内容（因为需要搜索整个 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);
http://jsfiddle.net/mu81yz7y/
因为我们只搜索具有该 css 类的输入，所以它应该执行得非常好。
但是，再一次，这似乎是一个完整的 hack。如果您问“我如何使用胶带将发动机固定到我的汽车车身上”，也许您应该停下来看看您是否应该问这个问题。 :)
【讨论】：
以上是关于如何检查具有布尔值的复选框的主要内容，如果未能解决你的问题，请参考以下文章