RadioGroup在Web表單中的表單項(xiàng)與動(dòng)態(tài)表單項(xiàng)的添加與刪除

發(fā)布時(shí)間：2024-08-19 14:58:24 來(lái)源：億速云閱讀：93 作者：小樊欄目：移動(dòng)開(kāi)發(fā)

RadioGroup是一種HTML表單元素，用于創(chuàng)建一組單選按鈕。在Web表單中，RadioGroup通常用于讓用戶從幾個(gè)選項(xiàng)中選擇一個(gè)。

動(dòng)態(tài)表單項(xiàng)的添加與刪除可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單的例子，演示如何使用JavaScript向表單中的RadioGroup添加和刪除選項(xiàng)。

<!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>

在上面的例子中，我們創(chuàng)建了一個(gè)包含兩個(gè)選項(xiàng)的RadioGroup，并添加了兩個(gè)按鈕，一個(gè)用于添加選項(xiàng)，另一個(gè)用于刪除選項(xiàng)。通過(guò)點(diǎn)擊這兩個(gè)按鈕，用戶可以動(dòng)態(tài)地向RadioGroup中添加或刪除選項(xiàng)。

向AI問(wèn)一下細(xì)節(jié)

RadioGroup在Web表單中的表單項(xiàng)與動(dòng)態(tài)表單項(xiàng)的添加與刪除

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽