RadioGroup在Web表单中的表单项与动态表单项的添加与删除

发布时间：2024-08-19 14:58:24 作者：小樊
来源：亿速云阅读：83

RadioGroup是一种HTML表单元素，用于创建一组单选按钮。在Web表单中，RadioGroup通常用于让用户从几个选项中选择一个。

动态表单项的添加与删除可以通过JavaScript来实现。下面是一个简单的例子，演示如何使用JavaScript向表单中的RadioGroup添加和删除选项。

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic RadioGroup</title>
</head>
<body>
    <form id="myForm">
        <div id="radioGroup">
            <input type="radio" name="option" value="option1">Option 1<br>
            <input type="radio" name="option" value="option2">Option 2<br>
        </div>
        <button type="button" onclick="addOption()">Add Option</button>
        <button type="button" onclick="removeOption()">Remove Option</button>
    </form>

    <script>
        function addOption() {
            var radioGroup = document.getElementById('radioGroup');
            var newOption = document.createElement('input');
            newOption.type = 'radio';
            newOption.name = 'option';
            newOption.value = 'option' + (radioGroup.getElementsByTagName('input').length + 1);
            newOption.id = 'option' + (radioGroup.getElementsByTagName('input').length + 1);
            var label = document.createElement('label');
            label.innerHTML = 'Option ' + (radioGroup.getElementsByTagName('input').length + 1) + '<br>';
            radioGroup.appendChild(newOption);
            radioGroup.appendChild(label);
        }

        function removeOption() {
            var radioGroup = document.getElementById('radioGroup');
            if (radioGroup.getElementsByTagName('input').length > 2) {
                var lastOption = radioGroup.getElementsByTagName('input')[radioGroup.getElementsByTagName('input').length - 1];
                var lastLabel = radioGroup.getElementsByTagName('label')[radioGroup.getElementsByTagName('label').length - 1];
                radioGroup.removeChild(lastOption);
                radioGroup.removeChild(lastLabel);
            } else {
                alert('Cannot remove any more options');
            }
        }
    </script>
</body>
</html>

在上面的例子中，我们创建了一个包含两个选项的RadioGroup，并添加了两个按钮，一个用于添加选项，另一个用于删除选项。通过点击这两个按钮，用户可以动态地向RadioGroup中添加或删除选项。

RadioGroup在Web表单中的表单项与动态表单项的添加与删除

相关阅读