溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript如何獲取單選按鈕的選擇狀態(tài)

發(fā)布時(shí)間：2020-07-11 14:41:51 來(lái)源：億速云 閱讀：321 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)JavaScript如何獲取單選按鈕的選擇狀態(tài)，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

JavaScript如何獲取單選按鈕的選擇狀態(tài)

我們先來(lái)看看checked屬性的值

true：選中單選按鈕

false：未選中單選按鈕

在表單中獲取單選按鈕時(shí)

由id屬性指定的情況

在JavaScript中引用id的表單控件

document.forms.(參照表格的id).(參照控件的id)

通過(guò)id引用單選按鈕的選擇狀態(tài)時(shí)

document.forms.(參照表格的id).(參照單選按鈕的id).checked

也可以訪問

document.(參照表格的name).(參照單選按鈕的id).checked

由name屬性指定時(shí)

可以從名稱獲取文本框和復(fù)選框的控件，但是對(duì)于單選按鈕，如果將其設(shè)置為相同的單選按鈕組，則不能使用從名稱獲取，因?yàn)槊Q的值相同。我們將從之前介紹的ID中檢查選擇狀態(tài)。

代碼如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" language="javascript">
    function onRadioButtonChange() {
      check1 = document.form1.Radio1.checked;
      check2 = document.form1.Radio2.checked;
      check3 = document.form1.Radio3.checked;
      target = document.getElementById("output");
      if (check1 == true) {
        target.innerHTML = "元素1被選中。<br/>";
      }
      else if (check2 == true) {
        target.innerHTML = "元素2被選中。<br/>";
      }
      else if (check3 == true) {
        target.innerHTML = "元素3被選中。<br/>";
      }
    }
  </script>
</head>
<body>
  <form name="form1" action="">
    <input id="Radio1" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio1">單選按鈕 元素1</label><br/>
    <input id="Radio2" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio2">單選按鈕 元素2</label><br />
    <input id="Radio3" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio3">單選按鈕 元素3</label><br />
  </form>
  <div id="output"></div>
</body>
</html>

說(shuō)明：

  <script type="text/javascript" language="javascript">
    function onRadioButtonChange() {
      check1 = document.form1.Radio1.checked;
      check2 = document.form1.Radio2.checked;
      check3 = document.form1.Radio3.checked;
      target = document.getElementById("output");
      if (check1 == true) {
        target.innerHTML = "元素1被選中。<br/>";
      }
      else if (check2 == true) {
        target.innerHTML = "元素2被選中。<br/>";
      }
      else if (check3 == true) {
        target.innerHTML = "元素3被選中。<br/>";
      }
    }
  </script>

以上是單選按鈕的選中狀態(tài)更改時(shí)要執(zhí)行的JavaScript代碼?？梢允褂胏hecked屬性獲取單選按鈕已選擇的狀態(tài)。如果選中單選按鈕，則為true，如果未選中，則為false。確定已檢查屬性并將消息顯示為具有“輸出”ID的元素的HTML。

 <form name="form1" action="">
    <input id="Checkbox1" type="checkbox" /><label for="Checkbox1">單選項(xiàng)目1</label><br />
    <input id="Checkbox2" type="checkbox" /><label for="Checkbox2">單選項(xiàng)目2</label><br />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

以上是表單部分的HTML。表單有兩個(gè)復(fù)選框和一個(gè)按鈕。在按鈕的onclick事件上執(zhí)行onBVuttonCLick（）函數(shù)。

運(yùn)行結(jié)果

執(zhí)行上面的HTML文件。將顯示如下所示的效果。

JavaScript如何獲取單選按鈕的選擇狀態(tài)

單擊單選按鈕選擇它。選擇后，單選按鈕底部會(huì)顯示一條消息，表示已選中元素。

JavaScript如何獲取單選按鈕的選擇狀態(tài)

使用GetElementById獲取的情況

使用DOM，可以在GetElemenById中獲取單選按鈕的選擇狀態(tài)，使用GetElementById，即使表單中不存在單選按鈕，也可以獲取它。

代碼如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" language="javascript">
    function onRadioButtonChange() {
      radiobtn1 = document.getElementById("Radio1");
      radiobtn2 = document.getElementById("Radio2");
      radiobtn3 = document.getElementById("Radio3");

      target = document.getElementById("output");

      if (radiobtn1.checked == true) {
        target.innerHTML = "元素1被選中。<br/>";
      }
      else if (radiobtn2.checked == true) {
        target.innerHTML = "元素2被選中。<br/>";
      }
      else if (radiobtn3.checked == true) {
        target.innerHTML = "元素3被選中。<br/>";
      }
    }
  </script>

</head>
<body>
  <input id="Radio1" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" /><label for="Radio1">單選按鈕 元素1</label><br/>
  <input id="Radio2" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" /><label for="Radio2">單選按鈕 元素2</label><br />
  <input id="Radio3" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" /><label for="Radio3">單選按鈕 元素3</label><br />
  <div id="output"></div>
</body>
</html>

說(shuō)明：

單擊單選按鈕并更改選擇狀態(tài)時(shí)，將調(diào)用onRadioButtonChange（）函數(shù)。在函數(shù)內(nèi)，調(diào)用GetElementById方法并獲取Radio 1，Radio 2，Radio 3的單選按鈕對(duì)象。選擇狀態(tài)由單選按鈕對(duì)象的checked屬性的值確定。頁(yè)面上顯示與單選按鈕選擇狀態(tài)對(duì)應(yīng)的消息。

運(yùn)行結(jié)果

使用Web瀏覽器執(zhí)行上述HTML文件。將顯示如下所示的效果。

JavaScript如何獲取單選按鈕的選擇狀態(tài)

單擊單選按鈕選擇。選中后，將顯示已選中的消息。

JavaScript如何獲取單選按鈕的選擇狀態(tài)

如果更改單選按鈕以進(jìn)行選擇，則消息內(nèi)容也會(huì)相應(yīng)的更改。

以上就是JavaScript如何獲取單選按鈕的選擇狀態(tài)，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手