資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 獲取選中單選按鈕的值？
在嘗試設計表單時，單選按鈕是最重要的 HTML 元件之一。使用者只能從單選按鈕顯示給他的選項中選擇一個。
通常，我們只需在 JavaScript 中使用元素的 value 屬性從 HTML 網頁中檢索元素的值。但是對於單選按鈕，我們不能這樣做。原因是獲取單個單選按鈕的值不是一個好主意。
讓我們開始本文，學習如何獲取選中的單選按鈕的值。為此，我們將使用 checked 屬性。
使用 checked 屬性
checked 屬性是一個布林屬性。如果存在，則表示當頁面載入時，應預先選中（選中）<input> 元素。checked 屬性可用於複選框和單選輸入型別。使用 JavaScript，也可以在頁面載入後修改 checked 屬性。
語法
以下是 checked 屬性的語法：
<input checked>
讓我們看一些示例，以便更好地瞭解如何獲取選中的單選按鈕的值。
示例
在以下示例中，我們正在執行獲取選中單選按鈕值的指令碼。
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1 ">
<center>
<div id="tutorial">
<p>Choose The Course</p>
<div>
<input type="radio" id="java" name="course" value="java" />
<label for="java">JAVA</label>
<input type="radio" id="html" name="course" value="html" />
<label for="html">HTML</label>
</div>
<button id="tutorial1">Click</button>
</div>
</center>
<script>
document.getElementById("tutorial1").onclick = function () {
var radioButtonGroup = document.getElementsByName("course");
var checkedRadio = Array.from(radioButtonGroup).find(
(radio) => radio.checked
);
alert("The Selected Course Was : " + checkedRadio.value);
};
</script>
</body>
</html>
當指令碼執行時，它將生成一個包含文字以及單選按鈕和點選按鈕的輸出。當用戶選擇單選按鈕並點選時，一個彈出視窗將顯示您選擇的價值。
示例
考慮以下示例，我們正在執行獲取選中單選按鈕值的指令碼。
<!DOCTYPE html>
<html>
<body style="text-align:center;background-color:#D2B4DE;">
<p>
Choose Value And Click Submit Button
</p>
Choose:
<input type="radio" name="Choose" value="LogIn">Login In
<input type="radio" name="Choose" value="SignUp">Sign Up
<br>
<button type="button" onclick="getvalue()">
Submit
</button>
<br>
<div id="result"></div>
<script>
function getvalue() {
var ele = document.getElementsByName('Choose');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("result").innerHTML = "Choosen: "+ele[i].value;
}
}
</script>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，顯示文字以及單選按鈕和提交按鈕。當用戶選擇單選按鈕並點選提交按鈕時，事件被觸發並顯示所選的值。
使用 querySelector() 函式
querySelector() 函式返回與給定選擇器或選擇器集匹配的文件的第一個元素。如果未發現匹配項，則返回 null。
語法
以下是 querySelector() 的語法：
querySelector(selectors)
示例
執行以下程式碼並觀察我們如何獲取選中單選按鈕的值。
<!DOCTYPE html>
<html>
<body style="text-align:center;background-color:#D6EAF8 ;">
<div id="tutorial">
<p>Choose The Gender:</p>
<div>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="Female">Female</label>
<input type="radio" id="others" name="gender" value="Others">
<label for="Others">Others</label>
</div>
<button id="click">Submit</button>
</div>
<script>
document.getElementById('click').onclick = function() {
var selected = document.querySelector('input[type=radio][name=gender]:checked');
alert(selected.value);
}
</script>
</body>
</html>
當指令碼執行時，它將生成一個包含文字以及單選按鈕和提交按鈕的輸出。當用戶選擇值並點選按鈕時，一個彈出視窗顯示所選內容。
更新於: 2023年4月20日
6K+ 瀏覽量
廣告