JS获取复选框中当前选中的值

最新推荐文章于 2025-05-13 15:55:01 发布

百变Gai爆蛋

最新推荐文章于 2025-05-13 15:55:01 发布

阅读量2w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 复选框

本文链接：https://blog.youkuaiyun.com/biledoudou/article/details/88396483

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了HTML中onchange与onclick事件的区别与应用，通过实例对比两种事件触发条件，解析其在表单元素中的作用，如复选框、单选框及下拉列表的选择变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>onchange</title>
</head>
<script type="text/javascript">
    window.function() {
        var aFruit=document.getElementsByName("checkfruit");
        var oSelectAll=document.getElementById("selectAll");
        var oP=document.getElementById("content");
        var str="";
        //全选/全不选
        oSelectAll.onchange=function() {
            if(this.checked) {
                for(var i=0;i<aFruit.length;i++) {
                    aFruit[i].checked=true;
                    str+=aFruit[i].value+" ";
                }
                oP.innerText="你选择的瓜是："+str;
            }else {
                for(var i=0;i<aFruit.length;i++) {
                    aFruit[i].checked=false;
                }
                oP.innerText="你没有选择任何瓜";
                str="";
            }
        }
        //单个点击复选框
        var str1="";
        for(var i=0;i<aFruit.length;i++) {
            aFruit[i].onchange=function() {
                if(this.checked) {
                    str1=str1+this.value+" ";
                }else {
                    str1=str1.replace(this.value,"");
                }
                oP.innerText="你选择的瓜是："+str1;
            }
        }
    }
</script>
<body>
    <div>
        <label><input type="checkbox" id="selectAll"/>全选/全不选：</label><br /><br />
        <label><input type="checkbox" name="checkfruit" value="冬瓜"/>冬瓜</label>
        <label><input type="checkbox" name="checkfruit" value="南瓜"/>南瓜</label>
        <label><input type="checkbox" name="checkfruit" value="西瓜"/>西瓜</label>
        <label><input type="checkbox" name="checkfruit" value="北瓜"/>北瓜</label>
    </div>
    <p id="content"></p>
</body>
</html>

效果图：
在这里插入图片描述

代码中用了今天看到的onchange事件，onchange事件常用于“具有多个选项的表单元素”中。

单选框选择某一项时触发
复选框选择某一项时触发
下拉列表选择某一项时触发

在代码中用onclick点击事件也是可以的，出来的效果是一样的！！！
只不过，onchange与onclick还是有点区别的：
onclick事件：点击控件时触发的事件
onchange事件：控件内容发生改变时触发的事件（对象有了变化才触发事件）

下面我写了一个例子对两个事件做了比较：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>onchange</title>
</head>
<script type="text/javascript">
    window.function() {
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        oBtn1.onclick=function() {
            alert("onlick事件");
        }
        oBtn1.onchange=function() {
            alert("onchange事件");
        }
    }
</script>
<body>
    <input type="button" id="btn1" value="onclick"/>
    <input type="button" id="btn2" value="onchange"/>
</body>
</html>

运行图：
在这里插入图片描述