JavaScript 单选按钮组动作设置|极客教程

JavaScript 单选按钮组动作设置

在网页开发中，单选按钮组是一种常见的用户交互元素，通常用于让用户在多个选项中选择一个。通过JavaScript，我们可以为单选按钮组添加动作设置，实现更加丰富的交互效果。本文将详细介绍如何使用JavaScript为单选按钮组添加动作设置，并提供多个示例代码。

示例代码1：获取单选按钮组的值

首先，我们需要获取单选按钮组中被选中的值。下面是一个示例代码，演示如何通过JavaScript获取单选按钮组的值：

<!DOCTYPE html>
<html>
<head>
    <title>获取单选按钮组的值</title>
</head>
<body>
    <input type="radio" name="gender" value="male" checked> Male
    <input type="radio" name="gender" value="female"> Female
    <button onclick="getSelectedValue()">Get Value</button>
    <p id="result"></p>

    <script>
        function getSelectedValue() {
            var radios = document.getElementsByName('gender');
            var selectedValue;
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    selectedValue = radios[i].value;
                    break;
                }
            }
            document.getElementById('result').innerText = 'Selected value: ' + selectedValue;
        }
    </script>
</body>
</html>

代码运行结果:

JavaScript 单选按钮组动作设置

在上面的示例代码中，我们创建了一个包含两个单选按钮的单选按钮组，并通过JavaScript实现了获取被选中的值的功能。点击按钮后，页面会显示被选中的值。

示例代码2：根据单选按钮组的值执行不同的动作

除了获取单选按钮组的值，我们还可以根据不同的值执行不同的动作。下面是一个示例代码，演示如何根据单选按钮组的值执行不同的动作：

<!DOCTYPE html>
<html>
<head>
    <title>根据单选按钮组的值执行不同的动作</title>
</head>
<body>
    <input type="radio" name="color" value="red" checked> Red
    <input type="radio" name="color" value="blue"> Blue
    <button onclick="performAction()">Perform Action</button>
    <p id="result"></p>

    <script>
        function performAction() {
            var radios = document.getElementsByName('color');
            var selectedValue;
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    selectedValue = radios[i].value;
                    break;
                }
            }
            switch (selectedValue) {
                case 'red':
                    document.getElementById('result').innerText = 'You selected red color.';
                    break;
                case 'blue':
                    document.getElementById('result').innerText = 'You selected blue color.';
                    break;
                default:
                    document.getElementById('result').innerText = 'Please select a color.';
            }
        }
    </script>
</body>
</html>

代码运行结果:

JavaScript 单选按钮组动作设置

在上面的示例代码中，我们创建了一个包含两个单选按钮的单选按钮组，并根据不同的值执行不同的动作。点击按钮后，页面会显示相应的提示信息。

示例代码3：根据单选按钮组的值显示不同的内容

除了执行不同的动作，我们还可以根据单选按钮组的值显示不同的内容。下面是一个示例代码，演示如何根据单选按钮组的值显示不同的内容：

<!DOCTYPE html>
<html>
<head>
    <title>根据单选按钮组的值显示不同的内容</title>
</head>
<body>
    <input type="radio" name="fruit" value="apple" checked> Apple
    <input type="radio" name="fruit" value="banana"> Banana
    <div id="apple" style="display: none;">You selected apple.</div>
    <div id="banana" style="display: none;">You selected banana.</div>

    <script>
        var radios = document.getElementsByName('fruit');
        for (var i = 0; i < radios.length; i++) {
            radios[i].addEventListener('change', function() {
                var selectedValue = this.value;
                document.getElementById('apple').style.display = selectedValue === 'apple' ? 'block' : 'none';
                document.getElementById('banana').style.display = selectedValue === 'banana' ? 'block' : 'none';
            });
        }
    </script>
</body>
</html>

代码运行结果:

JavaScript 单选按钮组动作设置