将“选中”属性添加到 jquery 中的复选框

Question

所以我实际上将复选框设置为已选中没有问题，但是在我当前的情况下，我需要实际将 "checked" 属性添加到复选框，因为我正在使用的系统是字面上的从 DOM.

中获取 HTML

我可以设置要选中的复选框，但是由于没有识别 "checked" 属性当 HTML 再次插入时它不包含属性所以所有复选框都未选中:(

有没有一种方法可以将 'checked' 作为属性添加和删除，以便从原始的 HTML 中清楚地看到选中了哪些框？例如

未选中框

<input type="checkbox" value="yes" />

勾选框

<input type="checkbox" checked value="yes" />

感谢任何帮助！！

Answer 1

$("#checkbox").prop("checked", true);
$("#checkbox").prop("checked", false);

适用于 jQuery 1.6+。

早期版本：

$("#checkbox").attr("checked", true);
$("#checkbox").attr("checked", false);

Answer 2

我建议执行 $("#checkbox").attr("checked", true); 或 $("#checkbox").prop("checked", true);

但是，如果您的程序或其他获取 html 的程序无法获取复选框值，您可以尝试执行以下操作：

检查事件时，替换

<input type="checkbox" value="yes" />

和

<input type="checkbox" value="yes" checked/>

当它抓取 html 并重新打印时，应该对其进行检查。

编辑

喜欢$(this).replaceWith('<input type="checkbox" value="yes" checked/>');

编辑 2

示例：

<input type="checkbox" value="yes" />

$("input[value='yes']").on('click', function(){
  $("input[value='yes']").replaceWith(<input type="checkbox" value="yes" checked/>);
});

Answer 3

试试这个..

$( "input[type='checkbox']" ).prop( "checked", true );

Answer 4

我们可以从 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>

Answer 5

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.

没错，选中状态不会反映在您从 innerHTML 返回的元素标记中。

您可以通过显式设置和删除元素上的属性来强制它；下面是单击复选框时执行此操作的示例，或者您可以通过在获取元素 HTML.

之前立即更新元素来执行此操作

这适用于 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>

请注意，我必须直接转到 DOM 才能执行此操作，因为 jQuery 在 attr 中对 checked 有特殊处理。

将“选中”属性添加到 jquery 中的复选框

Add "checked' property to checkbox in jquery

html

javascript

checkbox

jquery

编辑

编辑 2

将“选中”属性 添加到 jquery 中的复选框

Add "checked' property to checkbox in jquery

html

javascript

checkbox

jquery

编辑

编辑 2

将“选中”属性添加到 jquery 中的复选框