javascript 将“已检查”属性添加到 jquery 中的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28606119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add "checked' property to checkbox in jquery
提问by Josh Undefined
So I have no problem actually setting checkboxes as checked, however in my current case I need to actually add the "checked" property to the checkboxes, as the system I'm working in literally grabs the HTML from the DOM.
所以我实际上将复选框设置为选中没有问题，但是在我当前的情况下，我需要将“选中”属性实际添加到复选框中，因为我正在使用的系统实际上是从 DOM 中获取 HTML。
I can set the checkbox to be checked, however as there's no identifying "checked" property when the HTML gets inserted again it doesn't hold the property so all checkboxes come back unchecked :(
我可以将复选框设置为选中状态，但是由于在再次插入 HTML 时没有可识别的“已选中”属性，因此它不包含该属性，因此所有复选框都未选中:(
is there a way to add and remove 'checked' as a property so it will be apparent from the raw HTML what boxes are checked? e.g.
有没有办法添加和删除“已检查”作为属性，以便从原始 HTML 中可以明显看出哪些框被选中？例如
unchecked box
未选中的框
<input type="checkbox" value="yes" />
checked box
复选框
<input type="checkbox" checked value="yes" />
Appreciate any help!!
感谢任何帮助！
采纳答案by T.J. Crowder
I'm pulling RAW html from the page, but by default it seems checked checkboxes don't have any identifying properties or attributes so the HTML that is extracted doesn't know if they were checked or not, if I can add or remove the checked property it will solve my problem.
我正在从页面中提取 RAW html，但默认情况下，选中的复选框似乎没有任何识别属性或属性，因此提取的 HTML 不知道它们是否被选中，如果我可以添加或删除检查属性它将解决我的问题。
That's correct, the checked state isn't reflected in the markup you get back from innerHTMLfor the element.
没错，选中的状态不会反映在您innerHTML为元素返回的标记中。
You can force it to be by explicitly setting and removing the attribute on the element; below is an example doing it when the checkbox is clicked, or alternately you might do it by updating the elements immediately before grabbing their HTML.
您可以通过显式设置和删除元素上的属性来强制它；下面是单击复选框时执行此操作的示例，或者您可以通过在获取 HTML 之前立即更新元素来执行此操作。
This works on Chrome, Firefox, IE11, and IE8, for instance:
这适用于 Chrome、Firefox、IE11 和 IE8，例如：
$("input").on("click", function() {
if (this.checked) {
this.setAttribute("checked", "checked");
} else {
this.removeAttribute("checked");
}
snippet.log(this.parentNode.innerHTML);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="checkbox" value="yes">
</div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>Note I had to go straight to the DOM to do it, as jQuery has special handling in attrfor checked.
请注意，我必须直接转到 DOM 才能做到这一点，因为 jQuery 对attrfor 进行了特殊处理checked。
回答by jonbaldie
$("#checkbox").prop("checked", true);
$("#checkbox").prop("checked", false);
Works for jQuery 1.6+.
适用于 jQuery 1.6+。
Earlier versions:
早期版本：
$("#checkbox").attr("checked", true);
$("#checkbox").attr("checked", false);
回答by Wervada
I recomend doing the $("#checkbox").attr("checked", true); or $("#checkbox").prop("checked", true);
我建议做 $("#checkbox").attr("checked", true); 或 $("#checkbox").prop("checked", true);
But if your program or what ever it is that grabs the html cant get the checkbox value you could try to do something like:
但是，如果您的程序或任何抓取 html 的内容无法获取复选框值，您可以尝试执行以下操作：
On checking event, replace the
在检查事件时，替换
<input type="checkbox" value="yes" />
with
和
<input type="checkbox" value="yes" checked/>
When it grabs the html and reprints it it should be checked.
当它抓取 html 并重新打印它时，它应该被检查。
EDIT
编辑
Like $(this).replaceWith('<input type="checkbox" value="yes" checked/>');
喜欢 $(this).replaceWith('<input type="checkbox" value="yes" checked/>');
EDIT 2
编辑 2
example:
例子：
<input type="checkbox" value="yes" />
$("input[value='yes']").on('click', function(){
$("input[value='yes']").replaceWith(<input type="checkbox" value="yes" checked/>);
});
回答by Deenadhayalan Manoharan
Try this..
试试这个..
$( "input[type='checkbox']" ).prop( "checked", true );
回答by Kumar
We can do from css too
我们也可以从 css 做
.nice-form [type="checkbox"],
.nice-form [type="radio"]{
position:fixed;
left:0;
top:0;
opacity:0;
z-index: -1;
}
.nice-form .fake-input{
display: inline-block;
width:16px;
height:16px;
border:1px solid #bbb;
background:#f8f8f8;
vertical-align: middle;
position: relative;
margin-right: 5px;
}
.nice-form [type=radio] + .fake-input{border-radius:100%;}
.nice-form [type="checkbox"] + .fake-input:before{
content:'';
width:8px;
height:4px;
position:absolute;
top:50%;
left:50%;
border:3px solid #777;
border-width:0 0 3px 3px;
opacity: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin:-4px 0 0 -5px;
}
.nice-form [type="radio"] + .fake-input:before{
content:'';
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
background: #777;
border-radius:100%;
opacity: 0;
}
.nice-form [type="radio"]:checked + .fake-input:before,
.nice-form [type="checkbox"]:checked + .fake-input:before{opacity:1;}
.nice-form [type="radio"]:checked ~ .fake-label,
.nice-form [type="checkbox"]:checked ~ .fake-label {color:#f00}
.nice-form input:disabled + .fake-input,
.nice-form input:disabled ~ .fake-label{opacity: .5;}<form class="nice-form">
<label for="check-1">
<input id="check-1" type="checkbox">
<span class="fake-input"></span>
<span class="fake-label">Label text</span>
</label>
</form>