修改

Question

所以我实际上将复选框设置为选中是没有问题的，但是在我目前的情况下，我需要实际添加＆＃34;已选中＆＃34;属性到复选框，因为我正在工作的系统从DOM中获取HTML。

我可以设置要检查的复选框，但是因为没有识别＆＃34;已检查＆＃34;再次插入HTML时，它不会保留属性，因此所有复选框都会取消选中：（

有没有办法添加和删除＆＃39;已检查＆＃39;作为一个属性，因此从原始HTML中可以看出哪些框被检查？ e.g。

未选中框

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

选中框

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

感谢任何帮助!!

Answer 1

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

这是正确的，检查状态不会反映在您从元素innerHTML返回的标记中。

您可以通过显式设置和删除元素上的属性来强制它;下面是单击复选框时执行此操作的示例，或者您可以通过在抓取HTML之前立即更新元素来执行此操作。

这适用于Chrome，Firefox，IE11和IE8，例如：

＆＃13;

$("input").on("click", function() {
  if (this.checked) {
      this.setAttribute("checked", "checked");
  } else {
      this.removeAttribute("checked");
  }
  snippet.log(this.parentNode.innerHTML);
});

＆＃13;

<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>

＆＃13;

注意我必须直接使用DOM来执行此操作，因为jQuery在attr中对checked进行了特殊处理。

Answer 2

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

适用于jQuery 1.6 +。

早期版本：

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

Answer 3

我建议做$（＆＃34;＃复选框＆＃34;）。attr（＆＃34; checked＆＃34;，true）; 或$（＆＃34; #checkter＆＃34;）。prop（＆＃34; checked＆＃34;，true）;

但是，如果你的程序或者什么是抓住html cant获得复选框值，你可以尝试做类似的事情：

检查事件时，请替换

<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 4

试试这个..

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

Answer 5

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

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

5 个答案:

修改

编辑2