logo标签列表

在jQuery中为复选框添加“checked”属性

javascriptjqueryhtmlcheckbox
3
所以，我实际上没有问题在复选框中设置为已选中，但在我目前的情况下，我需要将“checked”属性添加到复选框中，因为我正在使用的系统从DOM中获取HTML。

我可以设置复选框为已选中，但是由于插入HTML时没有确定的“checked”属性，所以所有复选框都变回未选中状态 :(

有没有一种方法可以添加和删除“checked”作为属性，以便从原始HTML中明显地看出哪些框已被选中？例如：

未选中的框

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

选中的复选框

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

感谢您的帮助!!
你是如何插入 HTML 的？ - Bhushan Kawadkar
我正在使用 .html 获取内容并使用 .append 将其插入回去。然而，我可以看到在数据库中没有识别框被选中的属性或属性，这表明当使用 .html 获取时它是被获取的。 - Josh Undefined
1
“...当 HTML 再次被插入时…” 由什么插入？你所说的“再次”是指页面刷新吗？还是更新内容？或者是外星人在黑客攻击这个页面？ - T.J. Crowder
设置属性 $(this).attr("checked", true); - dfsq
1
抱歉，大家可能对应用程序的操作读入太多了，这可能是我在问题陈述上措辞不当。我正在从页面中提取原始HTML，但默认情况下，似乎选中的复选框没有任何标识属性或属性，因此提取的HTML不知道它们是否被选中，如果我可以添加或删除选中属性，就可以解决我的问题。 - Josh Undefined
显示剩余2条评论
5个回答
1
我从页面中提取原始HTML，但默认情况下，勾选的复选框没有任何识别属性或属性，因此提取的HTML不知道它们是否被选中，如果我可以添加或删除checked属性，它将解决我的问题。
没错，从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对于“checked”的attr有特殊处理。
1
$("#checkbox").prop("checked", true);
$("#checkbox").prop("checked", false);

适用于jQuery 1.6及以上版本。

早期版本：

$("#checkbox").attr("checked", true);
$("#checkbox").attr("checked", false);
1
然后更改id选择器或复选框的id属性。 - jonbaldie
这些方法可以用于检查和取消选择框，但是在执行此操作后，HTML 中没有任何标识它们已被选中的内容。如果使用 .html 获取 HTML，则复选框没有任何指示已被选中的内容。 - Josh Undefined
0

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

0
我建议使用$("#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/>);
});
我认为这是正确的方向，你有什么关于如何安全地进行替换的见解吗？ - Josh Undefined
谢谢您的编辑，如果每个复选框有不同的名称、值等，您有什么建议吗？ - Josh Undefined
抱歉，我不理解 :( - Josh Undefined
你可以通过名称或值选择元素。$("input[name='xxxxxx']")只需编写您需要选择的属性，如名称或值，然后 ='xxxx' 并将 xxxx 替换为您想要选择的输入名称。 - Wervada
0

试试这个...

$( "input[type='checkbox']" ).prop( "checked", true );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接