html 获取多选框的值

kongbai韩

已于 2022-08-04 00:58:27 修改

阅读量2.8k

点赞数 2

文章标签： HTML JavaScript 复选框用户输入事件处理

于 2022-08-04 00:19:56 首次发布

本文链接：https://blog.csdn.net/weixin_65545648/article/details/126151326

版权

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>t</title>

</head>



<body>

    选择爱好：

    <input type="checkbox" name="box" id="box1" value="跳水" />跳水

    <input type="checkbox" name="box" id="box2" value="跑步" />跑步

    <input type="checkbox" name="box" id="box3" value="听音乐" />听音乐



    <button onclick="checkbox()"> 获取value值</button>

</body>

<script>

    function checkbox() {

        var str = document.getElementsByName("box"); //通过name来获取遍历对象

        var objarray = str.length;

        var choosestr = "";

        for (i = 0; i < objarray; i++) {

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

                choosestr += str[i].value + ",";

            }

        }

       

        if (chestr == "") {

            alert("请先选择爱好！");

        }

        else {

            alert("择的是：" + choosestr);

        }

    }

</script>



</html>