技术文摘

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 选中复选框的方法，无论是单个复选框还是多个复选框的操作，都能轻松应对，为前端开发的交互功能实现提供有力支持。

TAGS: JavaScript交互 JavaScript复选框选择选中复选框复选框操作

万千站长工具

技术文摘

JavaScript 怎样选中复选框（checkbox）

JavaScript 怎样选中复选框（checkbox）

欢迎使用万千站长工具！