如何取消选中纯 JavaScript 中的复选框？
[英]How to uncheck a checkbox in pure JavaScript?
问题描述
Here is the HTML Code:
这是 HTML 代码：
<div class="text">
<input value="true" type="checkbox" checked="" name="copyNewAddrToBilling"><label>
I want to change the value to false.我想将值更改为 false。 Or just uncheck the checkbox.或者只是取消选中复选框。 I'd like to do this in pure JavaScript, without the use of external libraries (no jQuery etc)我想在纯 JavaScript 中执行此操作，而不使用外部库（没有 jQuery 等）
5 个解决方案
解决方案1
69 已采纳 2013-09-18 01:02:00
<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>
I have added the language attribute to the script element, but it is unnecessary because all browsers use this as a default, but it leaves no doubt what this example is showing.我已经将 language 属性添加到 script 元素，但这是不必要的，因为所有浏览器都使用它作为默认值，但毫无疑问，这个示例显示的是什么。
If you want to use javascript to access elements, it has a very limited set of GetElement* functions.如果您想使用 javascript 访问元素，它的 GetElement* 函数集非常有限。 So you are going to need to get into the habit of giving every element a UNIQUE id attribute.所以你需要养成给每个元素一个 UNIQUE id 属性的习惯。
解决方案2
12 2013-09-18 01:01:11
Recommended, without jQuery :推荐，没有 jQuery ：
Give your <input> an ID and refer to that.给你的<input>一个 ID 并参考它。 Also, remove the checked="" part of the <input> tag if you want the checkbox to start out unticked.此外，如果您希望复选框开始时未checked="" ，请删除<input>标记的checked=""部分。 Then it's:然后是：
document.getElementById("my-checkbox").checked = true;
Pure JavaScript, with no Element ID (#1) :纯 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;
}
}
Pure Javascript, with no Element ID (#2) :纯 Javascript，没有元素 ID (#2) ：
document.querySelectorAll('.text input[name="copyNewAddrToBilling"]')[0].checked = true;
document.querySelector('.text input[name="copyNewAddrToBilling"]').checked = true;
Note that the querySelectorAll and querySelector methods are supported in these browsers: IE8+, Chrome 4+, Safari 3.1+, Firefox 3.5+ and all mobile browsers.请注意，以下浏览器支持querySelectorAll和querySelector方法：IE8+、Chrome 4+、Safari 3.1+、Firefox 3.5+ 和所有移动浏览器。
If the element may be missing, you should test for its existence, eg:如果元素可能丢失，您应该测试它是否存在，例如：
var input = document.querySelector('.text input[name="copyNewAddrToBilling"]');
if (!input) { return; }
With jQuery :使用 jQuery ：
$('.text input[name="copyNewAddrToBilling"]').prop('checked', true);
解决方案3
5 2016-07-08 11:46:09
There is another way to do this:还有另一种方法可以做到这一点：
//elem - get the checkbox element and then
elem.setAttribute('checked', 'checked'); //check
elem.removeAttribute('checked'); //uncheck
解决方案4
1 2013-09-18 01:05:56
You will need to assign an ID to the checkbox:您需要为复选框分配一个 ID：
<input id="checkboxId" type="checkbox" checked="" name="copyNewAddrToBilling">
and then in JavaScript:然后在 JavaScript 中：
document.getElementById("checkboxId").checked = false;
解决方案5
-1 2020-12-18 15:49:19
<html>
<body>
<input id="mycheck" type="checkbox">
</body>
<script language="javascript">
var=check;
document.getElementById("mycheck");
check.checked="false";
</script>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.