De *_*nte 39 html javascript checkbox
这是HTML代码:
<div class="text">
<input value="true" type="checkbox" checked="" name="copyNewAddrToBilling"><label>
我想将值更改为false.或者只需取消选中该复选框即可.我想在纯JavaScript中执行此操作,而不使用外部库(没有jQuery等)
Str*_*ngs 65
<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*函数.因此,您需要养成为每个元素赋予UNIQUE id属性的习惯.
she*_*nan 10
推荐,没有jQuery:
提供您<input>的ID并参考.此外,如果您希望复选框开始未选中,请删除标记的checked=""一部分<input>.那就是:
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);
还有另一种方法可以做到这一点:
//elem - get the checkbox element and then
elem.setAttribute('checked', 'checked'); //check
elem.removeAttribute('checked'); //uncheck