如何使用布尔值检查复选框

So the HTML spec says that you should add a checked attribute to the <input type="checkbox"> tag to mark it as checked. But I only have a boolean true or false value.

所以HTML规范说你应该将一个checked属性添加到标签以将其标记为已选中。但我只有一个布尔值true或false值。

As by design, I can't add any logic to the boolean value before it get parsed to html :(. Is it possible to check a Checkbox with a Boolean value on load just with html or js? I tried the following, but the onload seem not to trigger:

按照设计，我不能在解析为html之前将任何逻辑添加到布尔值:(。是否可以使用html或js在加载时检查带有布尔值的Checkbox？我尝试了以下内容，但是onload似乎没有触发：

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

I know that I can do something like this in jQuery:

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

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

I am looking for an elegant way to solve it. This must parse the whole DOM-Tree and would slow down my page.

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

Edit (trying to explain):

编辑（试图解释）：

In my company there exist a application that does the following by design:

在我的公司，有一个应用程序通过设计执行以下操作：

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

The Server than automatically replaces the %IsValide% var with a database value. Here true or false. But then the checkbox is always checked, even if the value is false. I am aware that this is because of the design of html5: checked="true" and checked="false" will marke the checkbox always as checked.

Server会自动将％IsValide％var替换为数据库值。这里是真还是假。但是，即使值为false，也始终选中复选框。我知道这是因为html5的设计：checked =“true”和checked =“false”会将复选框始终作为选中状态。

Now I'am searching for a solution to use the true or false value from %IsValide% to check the box correctly with javascript (or even better, with html.). I can use the %IsValide% at any position in the html tag. For example:

现在我正在寻找一个解决方案，使用％IsValide％中的true或false值来正确地使用javascript（甚至更好，使用html）来检查框。我可以在html标记的任何位置使用％IsValide％。例如：

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

But I can not add logic before it get parsed to HTML like this:

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

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

3 个解决方案

#1

I'm trying to understand what your asking. I'm thinking that you could accomplish it with some simple javascript:

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

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

to check it on page load:

在页面加载时检查它：

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

or avoid the onload attribute for body for checking it do this:

或者避免body的onload属性来检查它：

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

Then you just change it with javascript.

然后你只需用javascript更改它。

My other guess is that your wanting to change the value of the checkbox? Are you? Post a comment below my answer saying that I didn't understand what you are asking. Hope this helps! Here is my reference source: http://www.w3schools.com/jsref/prop_checkbox_checked.asp

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

#2

If your company's application sets checked="true" or checked="false" as you can see, this will not matter since checked is a boolean attribute and "the presence of this Boolean attribute indicates that the control is selected by default", and the checkbox will always be checked.

如果您所看到的公司的应用程序设置了checked =“true”或者checked =“false”，那么这将无关紧要，因为checked是一个布尔属性，并且“此布尔属性的存在表示默认情况下选择了控件”，并且将始终选中该复选框。

This should fix it:

这应该解决它：

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

jsFiddle example

jsFiddle示例

#3

I think ultimately you're going about this the wrong way, but if I had no other option like you're saying, I think the best you'll end up with (performance wise) would be to add a class to your input (true or false)

我认为最终你会以错误的方式解决这个问题，但如果我没有其他选择，就像你说的那样，我认为你最终会得到最好的（表现明智）就是在你的输入中添加一个类（对或错）

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

and then look for that class:

然后寻找那个类：

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

http://jsfiddle.net/mu81yz7y/

Because we're searching only for inputs that have that css class, this should perform very well.

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

But, again, this seems like a complete hack. If you're asking "how can I use duct tape to secure the engine to the body of my car," maybe you should stop to see if you should even be asking that question. :)

但是，再次，这似乎是一个完整的黑客。如果你问“我怎么用胶带将发动机固定在车身上”，也许你应该停下来看看你是否应该问这个问题。 :)

#1