Question

以下是HTML代码：

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

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

Answer 1

<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属性的习惯。

Answer 2

推荐，没有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);

Answer 3

还有另一种方法可以做到这一点：

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

Answer 4

您需要为复选框指定一个ID：

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

然后在JavaScript中：

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

Answer 5

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

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

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

5 个答案: