一个基于HTML和JavaScript的单选框弹出提示示例代码_JS特效_网页特效源码_教程

一个基于HTML和JavaScript的单选框弹出提示示例代码

核心提示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框弹出提示示例</title>
</head>
<body>
    <h1>请选择您喜欢的颜色：</h1>
    <input type="radio" name="color" value="red">红色<br>
    <input type="radio" name="color" value="green">绿色<br>
    <input type="radio" name="color" value="blue">蓝色<br>
    <buttonshowSelected()">点击选择</button>

    <script>
        function showSelected() {
            var radios = document.getElementsByName("color"); // 获取单选框列表
            var selectedColor = null;

            for (var i = 0; i < radios.length; i++) { // 遍历单选框
                if (radios[i].checked) { // 如果当前单选框被选中
                    selectedColor = radios[i].value; // 将值赋给已选变量
                    break; // 跳出循环
                }
            }

            if (selectedColor !== null) { // 判断是否有选择
                alert("您选择了：" + selectedColor);
            } else {
                alert("您没有选择任何颜色。");
            }
        }
    </script>
</body>
</html>

该代码创建了一个包含若干个单选按钮的表单，并在页面底部添加了一个“点击选择”按钮。当用户点击该按钮时，会根据当前选中的单选按钮弹出提示框，告知用户其选择的颜色。如果用户没有选择任何一个单选按钮，则同样会有提示框提醒用户。