1. 使用 document.querySelector 方法獲取單選框的值

這是最常用的方法。通過選擇器直接獲取單選框的值。在一個有多個單選框的情況下，您可以使用 CSS 選擇器，只獲取被選中的單選框的值。

const selectedValue = document.querySelector('input[name="yourRadioName"]:checked').value;
    

這里，’yourRadioName’ 是單選框的名稱屬性，:checked 偽類選擇器用于定位被選中的單選框。

2. 使用 document.getElementsByName 方法獲取單選框的值

利用這個方法可以獲取同名的所有單選框元素，然后通過循環(huán)來找出哪個單選框被選中。這種方法對于需要處理多個相同名稱的單選框很有用。

const radios = document.getElementsByName('yourRadioName');
let selectedValue;
for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        selectedValue = radios[i].value;
        break;
    }
}
    

這里以 ‘yourRadioName’ 為例，按照這種方式可以輕松找到被選中的單選框的值。

3. 使用 jQuery 獲取單選框的值

如果您的項目中已經(jīng)引入了 jQuery，可以直接通過 jQuery 的方法獲取單選框的值。這種方式既簡潔又易于理解。

const selectedValue = $('input[name="yourRadioName"]:checked').val();
    

使用 jQuery，代碼看起來更簡單，同時您還可以利用 jQuery 提供的其他工具進行更高級的操作。

4. 使用事件處理程序獲取單選框的值

在某些情況下，您可能希望在單選框變化時立即獲取其值。您可以為單選框設(shè)置事件監(jiān)聽器來實現(xiàn)這一點。

const radios = document.getElementsByName('yourRadioName');
radios.forEach(radio => {
    radio.addEventListener('change', () => {
        if (radio.checked) {
            console.log(radio.value);
        }
    });
});
    

通過監(jiān)聽每個單選框的 change 事件，您可以輕松捕獲到選中的值。

5. 使用 HTML5 表單 API 獲取單選框的值

如果您使用 HTML 表單，可以通過對表單元素進行訪問來輕松獲取單選框的值。這種方式尤其適合于表單提交時獲取數(shù)據(jù)。

const form = document.querySelector('form');
const selectedValue = [...form.elements['yourRadioName']].find(radio => radio.checked).value;
    

這種方法利用了結(jié)構(gòu)化的方法來訪問表單元素，提供了一種清晰的方式來獲取值。

6. 總結(jié)和最佳實踐

獲取單選框的值有多種方法，選擇合適的方法可以使代碼更簡潔、易于維護。在現(xiàn)代的 JavaScript 開發(fā)中，建議使用結(jié)構(gòu)化 API 和事件處理來確保用戶體驗良好。

7. 為什么要獲取單選框的值？

獲取單選框的值通常用于收集用戶輸入數(shù)據(jù)，例如在進行表單驗證，或根據(jù)用戶的選擇動態(tài)更新頁面內(nèi)容。準確獲取選中的值是確保應(yīng)用程序正常運行的基礎(chǔ)。

8. 如何在選擇單選框后立即獲取值？

可以通過事件監(jiān)聽器來實現(xiàn)。在用戶選擇單選框時觸發(fā) ‘change’ 事件，進而獲取其值。這種方式可以讓用戶體驗更加流暢，例如實時更新其他內(nèi)容。

9. 在沒有 jQuery 的環(huán)境下如何獲取單選框的值？

在純 JavaScript 中，可以使用 document.querySelector 或 document.getElementsByName 方法來獲取單選框的值。這些方法都不需要引入額外的庫，非常輕便和高效。