JavaScript 使用数组动态地创建单选按钮

在JavaScript中使用数组动态地创建单选按钮是为用户提供多个输入选项的有效方法。当用户点击其中一个单选按钮时，它将被选中，其他的选择将被自动取消选择。

这个过程可以通过循环浏览一个包含所有可能值的数组，并为数组中的每个项目创建一个新的单选按钮元素来实现自动化。

要使用一个数组动态地创建单选按钮，请使用createElement()的概念。和appendChild().让我们看看这个概念，以了解更多关于动态创建单选按钮的信息。

创建元素()方法

JavaScript的createElement()。函数可以用来动态地创建一个具有给定名称的HTML元素节点。这个方法使用元素的名字作为参数来创建元素节点。

appendChild() 方法可以用来在页面创建后插入一个新产生的元素。

语法

以下是createElement()的语法

document.createElement(nodename);

appendChild()方法

节点接口的appendChild()。如果提供的子节点是对文档中现有节点的引用，则将其从当前位置移动到新的位置。

语法

以下是appendChild()的句法

appendChild(aChild)

让我们深入了解下面的例子，以进一步了解如何在JavaScript中使用数组动态地创建单选按钮。

示例

在下面的例子中，我们正在运行脚本来创建一个单选按钮。

<!DOCTYPE html>
<html>
<body>
   Choose Gender:
   <input type="radio" name="gender" value="Male">Male
   <input type="radio" name="gender" value="Female">Female
   <input type="radio" name="gender" value="Others">Others<br>
   <button type="button" onclick="radiobutton()">Submit</button><br>
   <div id="result"></div>
   <script>
      function radiobutton() {
         var ele = document.getElementsByName('gender');
         for(i = 0; i < ele.length; i++) {
            if(ele[i].checked)
            document.getElementById("result").innerHTML = "Gender: "+ele[i].value;
         }
      }
   </script>
</body>
</html>

当该脚本被执行时，它将产生一个由单选按钮和提交组成的输出。当用户选择单选按钮并点击提交按钮时，它将显示用户选择的性别。

示例

考虑下面的例子，我们创建了一个新的具有必要属性的单选按钮，并将其附加到一个容器中。

<!DOCTYPE html>
<html>
<body>
   <div id="container"></div>
   <div>
      <button id="submit">Create</button>
   </div>
   <script>
      document.getElementById('submit').onclick = function() {
         var radiobox = document.createElement('input');
         radiobox.type = 'radio';
         radiobox.id = 'num';
         radiobox.value = '22+age';
         var label = document.createElement('label')
         label.htmlFor = 'num';
         var description = document.createTextNode('22+age');
         label.appendChild(description);
         var newline = document.createElement('br');
         var container = document.getElementById('container');
         container.appendChild(radiobox);
         container.appendChild(label);
         container.appendChild(newline);
      }
   </script>
</body>
</html>

当我们执行上述脚本时，它产生的输出包括一个标签按钮；当用户点击按钮时，一个事件被触发，单选按钮在网页上被创建。