【HTML+JS】单选框和多选框的用法，注意点；以及如何用JavaScript获取值，创建标签并给标签赋值

本文链接：https://blog.youkuaiyun.com/xudahai513/article/details/145159663

单选框：

<input type="radio" name=" " value=" ">

注意：为了使一组单选框互相排斥，需要指定相同的 name

<input type="radio" name="a">

<input type="radio" name="a">

复选框:

<input type="checkbox">

如果需要获取单选框或复选框的值，记得事先在 value = " " 属性赋值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div> 
        <h3>爱好</h3>
    <!-- 为了使一组单选框互相排斥，它们需要指定相同的name属性 -->
        <input type="radio" name="enjoy" value="吃饭">吃饭
        <input type="radio" name="enjoy" value="睡觉">睡觉
    </div>
    <div>
        <h3>运动</h3>
        <input type="checkbox" name="box" value="打篮球">打篮球
        <input type="checkbox" name="box" value="打乒乓球">打乒乓球
        <input type="checkbox" name="box" value="打羽毛球">打羽毛球
    </div><hr>
    <input type="submit" name="" onclick="sub()">

    <h2>输出我选中的内容：</h2>

    <div id="out"> </div>
</body>
<script type="text/javascript">
    function sub(){
 
        // 单选框的name为"enjoy"
        var selectedRadio = document.querySelector('input[name="enjoy"]:checked');
        if (selectedRadio) {

            //创建一个h5标签
            var outRadio = document.createElement('h5')

            // h5的内容是单选框选中的内容
            outRadio.innerHTML = selectedRadio.value;

            // 把h5这个标签放在id=out 的这个标签下面（<div id="out">）
            document.getElementById('out').appendChild(outRadio);
        }


         // 多选框的name为"box"
        var selectedCheckboxes = document.querySelectorAll('input[name="box"]:checked');
        if (selectedCheckboxes.length) {
            // 有选中的多选框
            selectedCheckboxes.forEach(checkbox => {

                // 输出每个选中的多选框的值
                var outBox = document.createElement('h6');
                outBox.innerHTML = checkbox.value;
                document.getElementById('out').appendChild(outBox);
            });
        } 

    }
</script>
</html>