嘗試設計表單時最重要的 HTML 元件之一是單選按鈕。使用者只能從單選按鈕顯示的選項中選擇一個選項。
通常，我們只是利用 JavaScript 中元素的 value 屬性從 HTML 網頁擷取元素的值。但對於單選按鈕，我們無法做到這一點。原因是取得各個單選按鈕的值是一個壞主意。
讓我們開始閱讀本文，了解如何取得選定單選按鈕的值。為此，我們將使用checked屬性。
使用選取屬性
檢查的屬性是布林屬性。如果存在，則表示在頁面載入時應預先選擇（選取） 元素。 Checked 屬性可與複選框和單選輸入類型一起使用。使用JavaScript，也可以在頁面載入後修改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>登入後複製
在執行腳本時，它將產生一個由文字以及單選按鈕和提交按鈕組成的輸出。當使用者選擇值並點擊按鈕時，會彈出一個窗口，顯示所選值。
以上是如何使用 JavaScript 取得選定單選按鈕的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
