如何在 JavaScript 中使用数组动态创建单选按钮?

javascriptweb developmentfront end technology

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

此过程可以通过循环遍历包含所有可能值的数组并为数组中的每个项目创建一个新的单选按钮元素来自动完成。

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

createElement()方法

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

可以使用 appendChild() 函数或 insertBefore() 方法在页面创建新元素后将其插入其中。

语法

以下是 createElement() 的语法

document.createElement(nodename);

appendChild() 方法

Node 接口的 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>

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