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

<!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>

效果图：
JS获取复选框中当前选中的值

代码中用了今天看到的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>

运行图：
JS获取复选框中当前选中的值

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

最后，给你们碗鸡汤：

	我不是想赢，我只是不想输