JavaScript獲取radio選中值的幾種常用方法小結(jié)
一、JS獲取radio選中的值
當(dāng)我們需要在網(wǎng)頁中獲取radio選中的值時，可以通過以下幾種方法來實現(xiàn)：
1. 使用document.getElementsByName獲取radio選中的值
<script>
function getRadioValue(){
var radios = document.getElementsByName('sex');
for(var i=0; i<radios.length; i++){
if(radios[i].checked){
alert("您選擇的是：" + radios[i].value);
break;
}
}
}
</script>
<body>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<br />
<input type="button" value="確定" onclick="getRadioValue()">
</body>上面的代碼中，使用document.getElementsByName獲取到name為“sex”的所有radio元素，然后遍歷這些元素，通過checked屬性獲取選中的值。
2. 使用document.querySelector獲取radio選中的值
<script>
function getRadioValue(){
var radio = document.querySelector('input[name="sex"]:checked');
alert("您選擇的是：" + radio.value);
}
</script>
<body>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<br />
<input type="button" value="確定" onclick="getRadioValue()">
</body>上面的代碼中，使用document.querySelector獲取name為“sex”且被選中的radio元素。如果沒有選中任何一個，則返回null。
3. 使用jQuery獲取radio選中的值
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$('input[name="sex"]').click(function(){
var value = $('input[name="sex"]:checked').val();
alert("您選擇的是：" + value);
});
});
</script>
<body>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</body>上面的代碼中，使用jQuery獲取name為“sex”且被選中的radio元素，并獲取其value屬性。
二、JS獲取radio選中的值的注意點
在使用JS獲取radio選中的值時，需要注意以下幾點：
1. 只能選擇一個
radio只能選擇一個，如果選中了多個，則會以最后選中的為準(zhǔn)。因此，在JS中也只需獲取被選中的一個。
2. 必須設(shè)置name屬性
對于一組radio，必須設(shè)置相同的name屬性，這樣才能標(biāo)識為同一組。
3. 必須設(shè)置value屬性
對于每個radio，必須設(shè)置value屬性，才能獲取其值。
三、JS獲取radio選中的值的兼容性問題
不同的瀏覽器對于JS獲取radio選中的值的兼容性也不同。以下是一些常見的兼容性問題及解決方法：
1. IE6、7不能識別document.getElementsByName
解決方法：通過在name屬性前加“.”或“#”來使用document.querySelectorAll來代替document.getElementsByName。
var radios = document.querySelectorAll('input[name="sex"]');2. Firefox、Chrome、Safari不能識別document.all
解決方法：使用document.getElementById或document.getElementsByTagName來代替。
var radios = document.getElementsByName('sex');
//替換為
var radios = document.getElementsByTagName('input');3. 獲取的值為“on”
解決方法：改為獲取checked屬性的值。
var value = radio.value; //替換為 var value = radio.checked;
四、總結(jié)
通過上面的內(nèi)容，我們詳細(xì)的了解了JS獲取radio選中的值的幾種方法，以及其注意點和兼容性問題。在實際開發(fā)中，應(yīng)根據(jù)具體情況選擇不同的方法來實現(xiàn)，以保證代碼的簡潔和穩(wěn)定性。
- Js得到radiobuttonlist選中值的兩種方法(推薦)
- js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實現(xiàn)方法
- js獲取RadioButtonList的Value/Text及選中值等信息實現(xiàn)代碼
- javascript RadioButtonList獲取選中值
- js中獲取jsp表單中radio類型的值簡單實例
- JavaScript中獲取Radio被選中的值
- js獲取 type=radio 值的方法
- JS 如何獲取radio選中后的值及不選擇取radio的值
- 用js的for循環(huán)獲取radio選中的值
- js 獲取radio按鈕值的實例
- 用 Javascript 驗證表單(form)中的單選(radio)值
- javascript radio值獲取代碼
相關(guān)文章
這篇文章主要介紹了正則表達(dá)式優(yōu)化JSON字符串的技巧的相關(guān)資料,需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄猨s獲取css的各種樣式并且設(shè)置他們的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了JS+Canvas實現(xiàn)動態(tài)時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了JS 設(shè)置Cookie 有效期 檢測cookie的相關(guān)資料,需要的朋友可以參考下2017-06-06
javascript事件的綁定基礎(chǔ)實例講解（34）
這篇文章主要為大家詳細(xì)介紹了javascript事件的綁定基礎(chǔ)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
微信小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實現(xiàn)微信支付實現(xiàn)解析
這篇文章主要介紹了小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實現(xiàn)微信支付實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
javascript mouseover、mouseout停止事件冒泡的解決方案
停止事件冒泡在各瀏覽器中已經(jīng)有相應(yīng)的解決方案，但是對于mouseover和mouseout卻顯得力不從心。2009-04-04
js 拖拽翻頁2009-04-04
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。這篇文章主要介紹了BootStrap的JS插件之輪播效果案例詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
鼠標(biāo)事件的抓取實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04