如何使用 JavaScript 或 jQuery 檢查單選按鈕

1. 使用 JavaScript 檢查單選按鈕
2. 使用 jQuery 檢查單選按鈕
3. 根據按鈕單擊檢查單選按鈕

我們經常使用諸如 jQuery 或 JavaScript 之類的客戶端指令碼來建立互動式且效能良好的網站，並且可以高效完成諸如表單驗證之類的簡單操作，而無需花費額外的時間訪問網路伺服器。

給定一個場景，我們希望預設情況下或在按鈕單擊事件上選擇單選按鈕，我們可以使用 JavaScript 或 jQuery。

讓我們首先定義一個表單。

    <div id='radiobuttonset'>
        <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
        <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
        <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
    </div>

使用 JavaScript 檢查單選按鈕

使用 ID 選擇單選按鈕

預先選擇單選按鈕的最佳方法之一是通過其 ID 進行引用。要使用 ID 選擇 DOM 元素，我們在 ID 前面新增字首 #，並將選中的值設定為 true。

document.querySelector('#myradio_1').checked = true;

輸出：單選按鈕 1 被選中。

使用值選擇單選按鈕

另一種選擇是使用單選按鈕的值來預選單選按鈕。在我們不知道單選按鈕的 ID 但知道值的情況下，按值選擇可能會很有用。

我們可以使用父 div 的 ID 並選擇值為 2 的元素。然後可以將 checked 屬性設定為 true。

document.querySelector('#radiobuttonset > [value="2"]').checked = true;

輸出：單選按鈕 2 被選中。

在某些情況下，如果我們知道 DOM 中沒有其他元素等於預定義的值，則可以僅通過檢查該值來選擇該元素。在這種情況下，我們將不需要父 ID。

document.querySelector('[value="3"]').checked = true;

輸出：單選按鈕 3 被選中。

使用 jQuery 檢查單選按鈕

除了使用 JavaScript，我們還可以使用 jQuery 庫根據預定義的值檢查單選按鈕。jQuery 是一個使用 JavaScript 構建的庫。它有助於簡化 HTML DOM 遍歷和操作。jQuery 的語法也比 JavaScript 簡單。

要新增使用 jQuery，請從 CDN 或本地檔案新增對 jQuery 庫的引用。

使用 ID 選擇單選按鈕

像 JavaScript 一樣，要使用 ID 訪問 DOM 元素，我們使用字首#。但是，確切的語法取決於所使用的 jQuery 版本。

當前穩定的 jQuery 版本是 3.4.1。

jQuery 的版本等於或大於（>=）1.6

如果使用的 jQuery 版本大於或等於 1.6，我們將使用 prop 將 checked 屬性設定為 true。

$('#myradio_1').prop('checked', true);

輸出：單選按鈕 1 被選中。

jQuery 的版本是（<）1.6 之前的版本

如果 jQuery 版本低於 1.6，我們可以更新 attr 為 checked。

$('#myradio_2').attr('checked', 'checked');

輸出：單選按鈕 2 已選中

使用值選擇單選按鈕

我們還可以基於按鈕的值更新單選按鈕的選定值。

$('input[name=radiobutton][value=\'1\']').prop('checked', true);

輸出：單選按鈕 2 已選中

根據按鈕單擊檢查單選按鈕

一旦我們知道了如何使用 JavaScript 或 jQuery 更新單選按鈕，就可以基於某個事件（例如按鈕單擊或任何其他元素選擇的事件）來更新選擇。為了測試它，讓我們更新表單以新增一個按鈕。

<div id='radiobuttonset'>
     <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
     <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
     <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
</div>
    <button id="button_1">check 1</button>

然後，我們可以在按鈕上新增 click 事件。單擊時，它選擇第一個單選按鈕。

$('#button_1').click(function() {
  $('input[name=radiobutton]').val(['1']);
});

輸出：單選按鈕 1 被選中