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)
This question is related to
javascript
html
checkbox
There is another way to do this:
//elem - get the checkbox element and then
elem.setAttribute('checked', 'checked'); //check
elem.removeAttribute('checked'); //uncheck
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;
<html>
<body>
<input id="mycheck" type="checkbox">
</body>
<script language="javascript">
var=check;
document.getElementById("mycheck");
check.checked="false";
</script>
</html>
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, e.g.:
var input = document.querySelector('.text input[name="copyNewAddrToBilling"]');
if (!input) { return; }
With jQuery:
$('.text input[name="copyNewAddrToBilling"]').prop('checked', true);
Source: Stackoverflow.com