添加“;选中'属性设置为jquery中的复选框

Add "checked' property to checkbox in jquery

本文关键字：jquery 复选框 设置 属性 选中 添加      更新时间：2024-01-14

因此，我实际上可以将复选框设置为checked，但在我当前的情况下，我需要将"checked"属性添加到复选框中，因为我所使用的系统实际上是从DOM中获取HTML。

我可以将复选框设置为选中，但是，当HTML再次插入时，由于没有标识"已选中"的属性，因此它不包含该属性，因此所有复选框都未选中：（

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

未选中框

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

复选框

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

感谢您的帮助！！

我从页面中提取RAW html，但默认情况下，选中的复选框似乎没有任何标识属性，因此提取的html不知道它们是否被选中，如果我可以添加或删除选中的属性，这将解决我的问题。

这是正确的，选中的状态不会反映在您从元素的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有特殊的处理。

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

适用于jQuery 1.6+.

早期版本：

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

试试这个。。

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

我建议执行$（"#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/>);
});

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

相关文章：