如何使用 JavaScript 或 jQuery 檢查單選按鈕
我們經常使用諸如 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 被選中