JavaScript中获得CheckBox状态的方法小结
更新时间：2025年03月11日 08:49:41 作者：Epicurus
在 JavaScript 中,获取复选框（CheckBox）的状态（选中或未选中）可以通过以下几种方式实现,以下是具体方法及示例,并通过代码示例介绍的非常详细,需要的朋友可以参考下
JavaScript中获得CheckBox状态的方法
1. 使用 checked 属性
checked 属性是复选框元素的布尔属性，表示复选框是否被选中。
示例：
<input type="checkbox" id="myCheckbox"> 同意协议
<button onclick="checkStatus()">检查状态</button>
<script>
function checkStatus() {
const checkbox = document.getElementById("myCheckbox");
if (checkbox.checked) {
console.log("复选框已选中");
} else {
console.log("复选框未选中");
}
}
</script>
2. 使用 querySelector 获取复选框
通过 querySelector 获取复选框元素，然后访问 checked 属性。
示例：
<input type="checkbox" class="myCheckbox"> 同意协议
<button onclick="checkStatus()">检查状态</button>
<script>
function checkStatus() {
const checkbox = document.querySelector(".myCheckbox");
console.log(checkbox.checked ? "选中" : "未选中");
}
</script>
3. 获取多个复选框的状态
如果有多个复选框，可以通过 querySelectorAll 获取所有复选框，然后遍历检查状态。
示例：
<input type="checkbox" class="myCheckbox" value="1"> 选项 1
<input type="checkbox" class="myCheckbox" value="2"> 选项 2
<input type="checkbox" class="myCheckbox" value="3"> 选项 3
<button onclick="checkStatus()">检查状态</button>
<script>
function checkStatus() {
const checkboxes = document.querySelectorAll(".myCheckbox");
checkboxes.forEach(checkbox => {
console.log(`选项 ${checkbox.value}: ${checkbox.checked ? "选中" : "未选中"}`);
});
}
</script>
4. 使用 addEventListener 监听状态变化
通过 addEventListener 监听复选框的 change 事件，实时获取状态。
示例：
<input type="checkbox" id="myCheckbox"> 同意协议
<script>
const checkbox = document.getElementById("myCheckbox");
checkbox.addEventListener("change", function() {
console.log(this.checked ? "复选框已选中" : "复选框未选中");
});
</script>
5. 使用表单数据获取状态
如果复选框位于表单中，可以通过 FormData 获取复选框的状态。
示例：
<form id="myForm">
<input type="checkbox" name="agree" value="yes"> 同意协议
<button type="button" onclick="checkStatus()">检查状态</button>
</form>
<script>
function checkStatus() {
const form = document.getElementById("myForm");
const formData = new FormData(form);
console.log(formData.get("agree") === "yes" ? "选中" : "未选中");
}
</script>
6. 使用 :checked 伪类选择器
通过 querySelector 结合 :checked 伪类选择器获取选中的复选框。
示例：
<input type="checkbox" class="myCheckbox"> 选项 1
<input type="checkbox" class="myCheckbox"> 选项 2
<input type="checkbox" class="myCheckbox"> 选项 3
<button onclick="checkStatus()">检查状态</button>
<script>
function checkStatus() {
const checkedBoxes = document.querySelectorAll(".myCheckbox:checked");
checkedBoxes.forEach(checkbox => {
console.log(`选中: ${checkbox.value}`);
});
}
</script>
7. 使用 jQuery（如果已引入）
如果项目中引入了 jQuery，可以使用其简化操作。
示例：
<input type="checkbox" id="myCheckbox"> 同意协议
<button onclick="checkStatus()">检查状态</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function checkStatus() {
const isChecked = $("#myCheckbox").is(":checked");
console.log(isChecked ? "选中" : "未选中");
}
</script>
总结
| 方法 | 适用场景 | 示例 |
|---|---|---|
checked 属性 | 获取单个复选框状态 | checkbox.checked |
querySelector | 获取单个复选框状态 | document.querySelector() |
querySelectorAll | 获取多个复选框状态 | document.querySelectorAll() |
addEventListener | 监听复选框状态变化 | checkbox.addEventListener() |
FormData | 获取表单中复选框状态 | new FormData(form) |
:checked 伪类选择器 | 获取选中的复选框 | querySelectorAll(":checked") |
jQuery | 简化操作（需引入 jQuery） | $("#myCheckbox").is(":checked") |
根据具体需求选择合适的方法，获取复选框的状态并进行相应处理。
以上就是JavaScript中获得CheckBox状态的方法小结的详细内容，更多关于JavaScript获取CheckBox状态的资料请关注脚本之家其它相关文章！
相关文章
屏蔽右键在某些特殊的情况下还是比较有用的，下面与大家分享个常用的屏蔽方法2014-05-05
这篇文章主要介绍了JavaScript实现在标题栏上显示当前日期的方法,涉及javascript操作时间及DOM节点的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
下面小编就为大家带来一篇浅谈js for循环输出i为同一值的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
WebWork 当然也提供了很友好的拦截器来实现对文件的上传，让我们可以专注与业务逻辑的设计和实现，在实现上传和下载时顺便关注了下框架上传下载的实现2016-02-02
这篇文章主要为大家详细介绍了Bootstrap轮播图学习使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
一分钟理解js闭包，关于js闭包的内容介绍了很多，本文带着大家快速理解什么是js闭包，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了小程序自定义索引菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在JavaScript中虽没有类似的方法，但我们可以利用字符串的replace方法自定义字符串的格式化方法。下面通过本文给大家分享使用JS在HTML中自定义字符串格式化的方法，需要的的朋友参考下吧2017-07-07
用js实现预览待上传的本地图片...2007-03-03
如何让动态插入的javascript脚本代码跑起来。...2007-01-01
最新评论