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

本文深入探讨了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>

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

这就是onclick与onchange的区别,在这个例子中点击onchange按钮并没有弹窗弹出,就是因为控件内容并没有发生变化。

最后,给你们碗鸡汤:

	我不是想赢,我只是不想输
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值