JS - 操作复选框checkbox（判断是否选中、设置勾选状态）

2016-10-13 发布：hangge 阅读：24705

本文通过样例演示如何使用纯 js 对 checkbox（复选框、多选框）进行各种操作。

1，判断是否勾选

下面样例中，按钮点击后会弹出 checkbox 的勾选状态（是否选中）。

<html>
  <head>
    <title>hangge.com</title>
    <meta charset="utf-8"/>
    <script>
    function btnClick() {
      var isChecked = document.getElementById("checkbox1").checked;
      alert(isChecked);
    }
    </script>
  </head>
  <body>
    <input id="checkbox1" type="checkbox" value="101"/>
    <label for="checkbox1">复选框1</label>
    <br><br>
    <button type="button" onclick="btnClick()">获取checkbox选中状态</button>
  </body>
</html>

2，设置将其勾选上

document.getElementById("checkbox1").checked = true;

3，取消勾选

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