How to uncheck a checkbox in pure JavaScript?
Question
Here is the HTML Code:
<div class="text">
<input value="true" type="checkbox" checked="" name="copyNewAddrToBilling"><label>
I want to change the value to false. Or just uncheck the checkbox. I'd like to do this in pure JavaScript, without the use of external libraries (no jQuery etc)
5 answers
solution1
69 ACCPTED 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.
If you want to use javascript to access elements, it has a very limited set of GetElement* functions. So you are going to need to get into the habit of giving every element a UNIQUE id attribute.
solution2
12 2013-09-18 01:01:11
Recommended, without jQuery :
Give your <input> an ID and refer to that. Also, remove the checked="" part of the <input> tag if you want the checkbox to start out unticked. Then it's:
document.getElementById("my-checkbox").checked = true;
Pure JavaScript, with no Element 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) :
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.
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 :
$('.text input[name="copyNewAddrToBilling"]').prop('checked', true);
solution3
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
solution4
1 2013-09-18 01:05:56
You will need to assign an ID to the checkbox:
<input id="checkboxId" type="checkbox" checked="" name="copyNewAddrToBilling">
and then in JavaScript:
document.getElementById("checkboxId").checked = false;
solution5
-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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.