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状态的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了js+css实现扇形导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
JavaScript DOMContentLoaded事件案例详解
这篇文章主要介绍了JavaScript DOMContentLoaded事件案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
本节主要介绍了JS数组的遍历方式for循环与for...in,需要的朋友可以参考下2014-07-07
这篇文章主要介绍了JavaScript常用进制转换及位运算实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
在客户端浏览器中，可以在某个时机使用javascript把一个div作为遮罩层，来封锁整个页面。2009-07-07
这篇文章主要介绍了微信小程序网络请求接口封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
本文以一个简单的小例子，简述在微信小程序开发中左右分栏功能的实现方式，主要涉及scroll-view ，列表数据绑定，及简单样式等内容，感兴趣的朋友跟随小编一起看看吧2019-05-05
这篇文章主要介绍了Bootstrap学习笔记之标签基本样式的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
返回上一页并自动刷新，JavaScript一般的使用history.go(-1)和history.back()等,需要的朋友可以参考下2014-02-02
本文主要分享了原生js开发的日历插件的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论