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中添加或删除选项。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。