JavaScript獲取radio選中值的幾種常用方法小結(jié)
一、JS獲取radio選中的值
當(dāng)我們需要在網(wǎng)頁(yè)中獲取radio選中的值時(shí)，可以通過以下幾種方法來實(shí)現(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元素。如果沒有選中任何一個(gè)，則返回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選中的值的注意點(diǎn)
在使用JS獲取radio選中的值時(shí)，需要注意以下幾點(diǎn)：
1. 只能選擇一個(gè)
radio只能選擇一個(gè)，如果選中了多個(gè)，則會(huì)以最后選中的為準(zhǔn)。因此，在JS中也只需獲取被選中的一個(gè)。
2. 必須設(shè)置name屬性
對(duì)于一組radio，必須設(shè)置相同的name屬性，這樣才能標(biāo)識(shí)為同一組。
3. 必須設(shè)置value屬性
對(duì)于每個(gè)radio，必須設(shè)置value屬性，才能獲取其值。
三、JS獲取radio選中的值的兼容性問題
不同的瀏覽器對(duì)于JS獲取radio選中的值的兼容性也不同。以下是一些常見的兼容性問題及解決方法：
1. IE6、7不能識(shí)別document.getElementsByName
解決方法：通過在name屬性前加“.”或“#”來使用document.querySelectorAll來代替document.getElementsByName。
var radios = document.querySelectorAll('input[name="sex"]');2. Firefox、Chrome、Safari不能識(shí)別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)容，我們?cè)敿?xì)的了解了JS獲取radio選中的值的幾種方法，以及其注意點(diǎn)和兼容性問題。在實(shí)際開發(fā)中，應(yīng)根據(jù)具體情況選擇不同的方法來實(shí)現(xiàn)，以保證代碼的簡(jiǎn)潔和穩(wěn)定性。
- Js得到radiobuttonlist選中值的兩種方法(推薦)
- js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法
- js獲取RadioButtonList的Value/Text及選中值等信息實(shí)現(xiàn)代碼
- javascript RadioButtonList獲取選中值
- js中獲取jsp表單中radio類型的值簡(jiǎn)單實(shí)例
- JavaScript中獲取Radio被選中的值
- js獲取 type=radio 值的方法
- JS 如何獲取radio選中后的值及不選擇取radio的值
- 用js的for循環(huán)獲取radio選中的值
- js 獲取radio按鈕值的實(shí)例
- 用 Javascript 驗(yàn)證表單(form)中的單選(radio)值
- javascript radio值獲取代碼
相關(guān)文章
這篇文章主要介紹了JavaScript中的Proxy對(duì)象的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-11-11
本篇文章主要介紹了淺談如何使用 webpack 優(yōu)化資源，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
PDF.js是由Mozilla支持的基于HTML5的PDF查看器,可以在web上解析和呈現(xiàn)PDF文件,它支持內(nèi)容檢索、頁(yè)面跳轉(zhuǎn)、文件打印等功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
viewer.js一個(gè)強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)
這篇文章主要介紹了Viewer這一款強(qiáng)大的 jQuery 圖像瀏覽插件,在信息詳情頁(yè)面實(shí)現(xiàn)點(diǎn)擊圖片可以預(yù)覽,腳本之家也是用的這個(gè)js，這里為分享一下使用方法，需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關(guān)于微信小程序使用wxParse解析html的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
理解Javascript_07_理解instanceof實(shí)現(xiàn)原理
在《Javascript類型檢測(cè)》一文中講到了用instanceof來用做檢測(cè)類型，讓我們來回顧一下2010-10-10
JavaScript時(shí)間格式整理大全(附大量示例)
在JavaScript中時(shí)間格式轉(zhuǎn)換是一個(gè)常見的需求,可以通過多種方式實(shí)現(xiàn),這篇文章主要介紹了JavaScript時(shí)間格式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
JavaScript安全加密之禁止別人調(diào)試自己的前端頁(yè)面代碼實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁(yè)面代碼實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JavaScript限定范圍拖拽及自定義滾動(dòng)條應(yīng)用（3）
這篇文章主要介紹了JavaScript限定范圍拖拽及自定義滾動(dòng)條應(yīng)用的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能,可實(shí)現(xiàn)針對(duì)表格中的字母、數(shù)字、日期等格式進(jìn)行排序的功能,涉及javascript針對(duì)頁(yè)面table元素的獲取及字符串、數(shù)字等排序操作相關(guān)技巧,需要的朋友可以參考下2017-03-03