RadioButton在Web表单中的表单项动态加载

发布时间：2024-08-20 09:47:19 作者：小樊
来源：亿速云阅读：88

要在Web表单中动态加载RadioButton表单项，可以使用JavaScript来实现。以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic RadioButton Demo</title>
</head>
<body>
  <form id="myForm">
    <label for="option1">Option 1</label>
    <input type="radio" id="option1" name="option" value="1" onclick="showSelection()">
    <label for="option2">Option 2</label>
    <input type="radio" id="option2" name="option" value="2" onclick="showSelection()">
  </form>
  
  <div id="selection"></div>
  
  <script>
    function showSelection() {
      var form = document.getElementById("myForm");
      var selection = document.getElementById("selection");
      
      selection.innerHTML = '';
      
      for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        
        if (element.type === 'radio' && element.checked) {
          selection.innerHTML = 'You selected option ' + element.value;
        }
      }
    }
  </script>
</body>
</html>

在这个示例中，我们创建了一个包含两个RadioButton选项的表单。当用户点击其中一个选项时，会调用showSelection()函数来动态显示用户选择的选项。函数通过遍历表单元素，找到被选中的RadioButton选项，并在页面上显示用户选择的选项。

你可以根据自己的需求修改和扩展这个示例代码来实现更复杂的动态加载RadioButton表单项的功能。

RadioButton在Web表单中的表单项动态加载

相关阅读