js checkbox

作者：嗜神魔影发布日期:2025-05-05 浏览:78

<!DOCTYPE html>
<html>
<head>
    <title>JS Checkbox Example</title>
</head>
<body>

<h2>Checkbox Example</h2>

<form id="myForm">
    <input type="checkbox" id="option1" name="option1" value="Option 1"> Option 1<br>
    <input type="checkbox" id="option2" name="option2" value="Option 2"> Option 2<br>
    <input type="checkbox" id="option3" name="option3" value="Option 3"> Option 3<br><br>
    <input type="button" value="Check Selected" onclick="checkSelected()">
</form>

<p id="result"></p>

<script>
function checkSelected() {
    // 获取表单中的所有复选框
    var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    var selectedOptions = [];

    // 遍历所有被选中的复选框，并将它们的值添加到数组中
    checkboxes.forEach(function(checkbox) {
        selectedOptions.push(checkbox.value);
    });

    // 将选中的选项显示在页面上
    document.getElementById('result').innerHTML = "Selected: " + selectedOptions.join(", ");
}
</script>

</body>
</html>

解释说明：

HTML部分：
- 创建了一个包含三个复选框的表单，每个复选框都有一个唯一的id和name属性。
- 添加了一个按钮，点击后会调用checkSelected()函数来检查哪些复选框被选中。
JavaScript部分：
- checkSelected()函数用于获取所有被选中的复选框，并将它们的值存储在一个数组中。
- 使用document.querySelectorAll选择所有被选中的复选框（即input[type="checkbox"]:checked）。
- 使用forEach遍历这些复选框，并将它们的值添加到selectedOptions数组中。
- 最后，使用document.getElementById('result').innerHTML将选中的选项显示在页面上的<p>标签中。

上一篇：bootstrap.min.js cdn

下一篇：js 拖拽