JavaScript原生方法判断复选框选中状态
作者:像素漫游时间:2026-10-29 15:34:01浏览:588
本文介绍如何使用原生JavaScript判断复选框是否选中并获取选中值。通过getElementsByName获取元素集合,遍历检查checked属性,拼接选中值。若未选中则提示用户选择,否则输出结果。
JavaScript判断复选框选中状态
此前曾总结过利用jQuery判断复选框选中状态的方法,本文将重点阐述如何使用原生JavaScript来实现这一功能。为了更直观地说明,以下通过一个具体的示例进行演示(假设当前页面存在如下的一组复选框):
<input type="checkbox" name="fruit" value="apple" />苹果
<input type="checkbox" name="fruit" value="orange" />橘子
<input type="checkbox" name="fruit" value="banana" />香蕉
<input type="checkbox" name="fruit" value="grape" />葡萄
获取复选框选中值实现
获取name属性为fruit的一组复选框的具体操作代码如下:
<script language="javascript">
function checkbox(){
var str=document.getElementsByName('fruit');
var strstrLen=str.length;
var checkVal='';
for (i=0;i<strLen;i++){
if(str[i].checked==true){
checkVal+=str[i].value+',';
}
}
if(checkVal==''){
alert("请先选择复选框~!");
}else{
alert("复选框的值是:"+checkVal);
}
}
</script>
将本文内容与之前介绍的《jQuery判断复选框是否被选中的方法》结合学习,能够带来更全面的理解与收获!
作者最新文章
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码:结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果?FLIP技术实战
2026-11-04 10:12:22
