如何取消选中纯 JavaScript 中的复选框？答案

【问题标题】：How to uncheck a checkbox in pure JavaScript?如何取消选中纯 JavaScript 中的复选框？
【发布时间】：2013-09-22 14:49:28
【问题描述】：

这是 HTML 代码：

<div class="text">
   <input value="true" type="checkbox" checked="" name="copyNewAddrToBilling"><label>

我想将值更改为 false。或者只是取消选中该复选框。我想在纯 JavaScript 中执行此操作，而不使用外部库（没有 jQuery 等）

【问题讨论】：

就checkBoxElem.checked = false！

标签： javascript html checkbox

【解决方案1】：

推荐，不带 jQuery：

给你的<input> 一个 ID 并参考它。此外，如果您希望复选框开始时未选中，请删除 <input> 标记的 checked="" 部分。然后是：

document.getElementById("my-checkbox").checked = true;

纯 JavaScript，没有元素 ID (#1)：

var inputs = document.getElementsByTagName('input');

for(var i = 0; i<inputs.length; i++){

  if(typeof inputs[i].getAttribute === 'function' && inputs[i].getAttribute('name') === 'copyNewAddrToBilling'){

    inputs[i].checked = true;

    break;

  }
}

纯 Javascript，没有元素 ID (#2)：

document.querySelectorAll('.text input[name="copyNewAddrToBilling"]')[0].checked = true;

document.querySelector('.text input[name="copyNewAddrToBilling"]').checked = true;

请注意，以下浏览器支持 querySelectorAll 和 querySelector 方法：IE8+、Chrome 4+、Safari 3.1+、Firefox 3.5+ 和所有移动浏览器。

如果元素可能丢失，你应该测试它是否存在，例如：

var input = document.querySelector('.text input[name="copyNewAddrToBilling"]');
if (!input) { return; }

使用 jQuery：

$('.text input[name="copyNewAddrToBilling"]').prop('checked', true);

【讨论】：

querySelectorAll() 是一个相当新的核心 javascript，目前还远未在大多数活跃的浏览器群体中可用。 jQuery 作者的这篇文档在宣传 querySelectAll() 作为 jQuery 替代品ejohn.org/blog/thoughts-on-queryselectorall 之前也值得一读
@Strings 实际上我仍然认为这个答案同样有效。特别是因为它支持替代品。在他的 cmets 中，OP 要求一种不涉及他在输入中添加 ID 的方法。 IE8+、Firefox 3.5+、Chrome 4+、Safari 3.1+ 和所有移动浏览器都支持querySelectAll。我不认为这对每个用户案例都是不够的。我并不是说querySelectorAll 适合所有人，但我认为值得加入 - 特别是如果我们正在努力推动网络向前发展。
@Shennan 我同意... querySelectorAll() 是一个非常有效的替代方案（并且随着人们升级浏览器/计算机而变得越来越重要），但遗憾的是，当使用核心 javascript 时，目标平台和用户群变得几乎和你的代码质量一样重要。我也会纠正自己——该功能确实存在于大多数浏览器中，它只是少数（ie
@Strings 我已经编辑了答案，以便更清楚地说明我的立场。

【解决方案2】：

<html>
    <body>
        <input id="check1" type="checkbox" checked="" name="copyNewAddrToBilling">
    </body>
    <script language="javascript">
        document.getElementById("check1").checked = true;
        document.getElementById("check1").checked = false;
    </script>
</html>

我已将语言属性添加到脚本元素，但没有必要，因为所有浏览器都将其用作默认值，但毫无疑问，此示例显示的是什么。

如果您想使用 javascript 访问元素，它的 GetElement* 函数集非常有限。所以你需要养成给每个元素一个唯一的 id 属性的习惯。

【讨论】：

但是由于您的大部分回复都表明大多数修改 HTML DOM 元素的 javascript 程序员通常会找到 jQuery 或其他类似框架的方法，因为它使编码更容易
有没有办法做到这一点，而无需在 html 代码中添加 id 标签？有没有办法通过名字来做到这一点？
并非如此，jQuery 是一种以比元素类型和元素 ID 或元素类属性更复杂的方式遍历元素 DOM 的方式
通过名称formName.checkboxName.value 来实现同样简单，或者您可以选择输入元素数组formName.elements[indexOfElement]。
另外，DOM 也不难遍历。是的，很难尝试维护像 someElement.childNodes[2].getElementsByTagName('span')[1] 这样荒谬的东西，但是嘿，它有助于为理解 DOM 操作铺平道路。我喜欢 jQuery，但并不是每一个简单的任务都需要它。在几乎任何合理的情况下，选择一个元素并不困难。 JavaScript 有许多可用的选择器，不要忘记您可以存储对节点的引用；如果您动态创建了元素，这尤其容易。

【解决方案3】：

您需要为复选框分配一个 ID：

<input id="checkboxId" type="checkbox" checked="" name="copyNewAddrToBilling">

然后在 JavaScript 中：

document.getElementById("checkboxId").checked = false;

【讨论】：

【解决方案4】：

还有另一种方法：

//elem - get the checkbox element and then
elem.setAttribute('checked', 'checked'); //check
elem.removeAttribute('checked'); //uncheck

【讨论】：

【解决方案5】：

<html>
    <body>
        <input id="mycheck" type="checkbox">
    </body>

    <script language="javascript">
        var=check;
        document.getElementById("mycheck");
        check.checked="false";
    </script>
</html>

【讨论】：

请在您的代码中添加一些解释。不鼓励在 SO 上仅提供代码答案。