js checkbox选中

作者：战神再世发布日期:2025-06-07 浏览:50

<!DOCTYPE html>
<html>
<head>
    <title>JS Checkbox选中示例</title>
</head>
<body>
    <form id="myForm">
        <input type="checkbox" id="chk1" name="chk1" value="选项1"> 选项1<br>
        <input type="checkbox" id="chk2" name="chk2" value="选项2"> 选项2<br>
        <input type="checkbox" id="chk3" name="chk3" value="选项3"> 选项3<br>
        <button type="button" onclick="checkStatus()">检查选中状态</button>
    </form>
    <script>
        function checkStatus() {
            // 获取所有checkbox元素
            var checkboxes = document.querySelectorAll('input[type=checkbox]');
            checkboxes.forEach(function(checkbox) {
                // 检查每个checkbox是否被选中，并输出结果
                if (checkbox.checked) {
                    console.log(checkbox.id + " 已选中");
                } else {
                    console.log(checkbox.id + " 未选中");
                }
            });
        }
    </script>
</body>
</html>

解释说明：

这个HTML页面包含了一个表单，其中包含了三个复选框（checkbox）和一个按钮。
当用户点击“检查选中状态”按钮时，会调用JavaScript函数 checkStatus()。
checkStatus() 函数通过 document.querySelectorAll 获取所有的复选框元素，并使用 forEach 方法遍历这些元素。
对于每个复选框，它会检查其 checked 属性，以确定该复选框是否被选中，并将结果输出到浏览器的控制台。

上一篇：js 获取高度

下一篇：bootstrap.min.js cdn