資料結構
網路
關係資料庫管理系統
作業系統
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+ 次瀏覽
廣告