数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中使用数组动态创建单选按钮？
在 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>
当我们执行上述脚本时，它会生成一个输出，其中包含一个标签按钮；当用户点击该按钮时，会触发一个事件，并在网页上创建单选按钮。
更新于: 2023年1月18日
5K+ 次浏览
广告