首頁 > 文章 > web前端 > 如何使用 JavaScript 取得選定單選按鈕的值？

如何使用 JavaScript 取得選定單選按鈕的值？

WBOY轉載: 2023-08-30 22:29:021919瀏覽

如何使用 JavaScript 获取选定单选按钮的值？

嘗試設計表單時最重要的 HTML 元件之一是單選按鈕。使用者只能從單選按鈕顯示的選項中選擇一個選項。

通常，我們只是利用 JavaScript 中元素的 value 屬性從 HTML 網頁擷取元素的值。但對於單選按鈕，我們無法做到這一點。原因是取得各個單選按鈕的值是一個壞主意。

讓我們開始閱讀本文，了解如何取得選定單選按鈕的值。為此，我們將使用checked屬性。

使用選取屬性

檢查的屬性是布林屬性。如果存在，則表示在頁面載入時應預先選擇（選取）元素。 Checked 屬性可與複選框和單選輸入類型一起使用。使用JavaScript，也可以在頁面載入後修改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>

在執行腳本時，它將產生一個由文字以及單選按鈕和提交按鈕組成的輸出。當使用者選擇值並點擊按鈕時，會彈出一個窗口，顯示所選值。

以上是如何使用 JavaScript 取得選定單選按鈕的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html NULL 事件选择器

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在 TypeScript 中建立非同步函數？下一篇：如何在 TypeScript 中建立非同步函數？

看更多