RadioGroup在Web表单中的表单项分组折叠

发布时间：2024-08-19 15:58:27 作者：小樊
来源：亿速云阅读：89

在Web表单中，可以使用RadioGroup来将一组单选按钮分组在一起，以便用户可以在其中进行选择。如果希望将RadioGroup中的表单项进行折叠，可以使用JavaScript来实现这一功能。以下是一个简单的示例代码来实现RadioGroup中表单项的折叠：

<!DOCTYPE html>
<html>
<head>
  <title>RadioGroup折叠示例</title>
</head>
<body>

<h2>选择一个选项：</h2>

<div>
  <input type="radio" name="group1" value="option1" checked> 选项1<br>
  <input type="radio" name="group1" value="option2"> 选项2<br>
  <input type="radio" name="group1" value="option3"> 选项3<br>
</div>

<button onclick="toggleCollapse()">折叠/展开</button>

<script>
function toggleCollapse() {
  var radioGroup = document.getElementsByName('group1');

  for(var i = 0; i < radioGroup.length; i++) {
    radioGroup[i].style.display = radioGroup[i].style.display === 'none' ? 'block' : 'none';
  }
}
</script>

</body>
</html>

在上面的示例中，我们首先创建了一个RadioGroup，其中包含三个单选按钮。然后，我们创建了一个按钮，当点击按钮时，会调用toggleCollapse()函数来切换RadioGroup中的表单项的显示状态（折叠/展开）。在toggleCollapse()函数中，我们使用循环来遍历RadioGroup中的表单项，并通过改变它们的display属性来实现折叠/展开的效果。

通过这种方式，我们可以用JavaScript在Web表单中实现RadioGroup的表单项分组折叠功能。

RadioGroup在Web表单中的表单项分组折叠

相关阅读