技术文摘
JavaScript 怎样选中复选框（checkbox）
2025-01-09 17:54:45 小编
JavaScript 怎样选中复选框（checkbox）
在前端开发中，使用 JavaScript 选中复选框（checkbox）是一项常见需求。熟练掌握这一操作，能有效提升用户交互体验，实现各种功能逻辑。下面就来详细探讨几种常见的实现方式。
可以通过 document.getElementById() 方法获取复选框元素，再设置其 checked 属性为 true 来选中复选框。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选中复选框示例</title>
</head>
<body>
<input type="checkbox" id="myCheckbox">
<script>
const checkbox = document.getElementById('myCheckbox');
checkbox.checked = true;
</script>
</body>
</html>
上述代码中，先通过 getElementById 获取到 id 为 myCheckbox 的复选框元素，然后将 checked 属性设为 true，该复选框就被选中了。
如果页面中有多个复选框，且它们具有相同的 name 属性，想要选中所有这些复选框，可以使用 document.querySelectorAll() 方法。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选中多个复选框示例</title>
</head>
<body>
<input type="checkbox" name="groupCheckbox">
<input type="checkbox" name="groupCheckbox">
<input type="checkbox" name="groupCheckbox">
<script>
const checkboxes = document.querySelectorAll('input[name="groupCheckbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = true;
});
</script>
</body>
</html>
这里通过 querySelectorAll 方法获取了所有 name 为 groupCheckbox 的复选框元素，然后使用 forEach 方法遍历这些元素，并将它们的 checked 属性设为 true，从而实现了多个复选框的选中。
在一些动态生成复选框的场景中，当新的复选框被创建时，也需要进行选中操作。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态选中复选框示例</title>
</head>
<body>
<div id="checkboxContainer"></div>
<script>
const container = document.getElementById('checkboxContainer');
const newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.checked = true;
container.appendChild(newCheckbox);
</script>
</body>
</html>
这段代码动态创建了一个复选框，并在创建时直接将其 checked 属性设为 true，之后将该复选框添加到页面的指定容器中，实现了动态创建并选中复选框。
掌握这些 JavaScript 选中复选框的方法，无论是单个复选框还是多个复选框的操作，都能轻松应对，为前端开发的交互功能实现提供有力支持。