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

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

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

這里，’yourRadioName’ 是單選框的名稱(chēng)屬性，:checked 偽類(lèi)選擇器用于定位被選中的單選框。

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

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

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 獲取單選框的值

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

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

使用 jQuery，代碼看起來(lái)更簡(jiǎn)單，同時(shí)您還可以利用 jQuery 提供的其他工具進(jìn)行更高級(jí)的操作。

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

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

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

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

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

如果您使用 HTML 表單，可以通過(guò)對(duì)表單元素進(jìn)行訪(fǎng)問(wèn)來(lái)輕松獲取單選框的值。這種方式尤其適合于表單提交時(shí)獲取數(shù)據(jù)。

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

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

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

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

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

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

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

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

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

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

源