如何用js读取复选框的值?

JavaScript010

如何用js读取复选框的值?,第1张

思路:首先利用name属性值获取checkbox对象,然后循环判断checked属性:如果为true表示被选中,false则表示未选中。

实例演示如下:

1、HTML结构

<input type="checkbox" name="test" value="1"/><span>1</span>

<input type="checkbox" name="test" value="2"/><span>2</span>

<input type="checkbox" name="test" value="3"/><span>3</span>

<input type="checkbox" name="test" value="4"/><span>4</span>

<input type="checkbox" name="test" value="5"/><span>5</span>

<input type='button' value='提交' onclick="fun()"/>

2、javascript代码

function fun(){

    obj = document.getElementsByName("test")

    check_val = []

    for(k in obj){

        if(obj[k].checked)

            check_val.push(obj[k].value)

    }

    alert(check_val)

}

3、演示效果

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script>

        function f1() {

            //获取所有name为chk的多选框,返回一个多选框数组

            var chks = document.form.chk

            //把选中的多选框的值拼接成字符串

            var str = ""

            //循环多选框数组

            for (var i = 0 i < chks.length i++) {

                //如果多选框被选中,则把值累计到str中

                if (chks[i].checked == true) {

                    str += chks[i].value + ","

                }

            }

            //弹出多选框选中的结果

            alert("您勾选的值是:"+str)

        }

    </script>

</head>

<body>

    <form name="form">

        <input type=checkbox name="chk" value=1>

        <input type=checkbox name="chk" value=2>

        <input type=checkbox name="chk" value=3>

        <input type="button" value="测试" onclick="f1()"/>

    </form>

</body>

</html>