jQuery獲取radio選中項的值實例
更新時間：2016年06月18日 11:38:48 作者：酷小孩
本文主要介紹jQuery獲取radio選中項的值的方法，希望能幫到大家，有需要的朋友可以參考一下。
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
//沒有默認選中的情況
//先判斷radio是否有選中項，再獲取選中的值
$("#btnclick").click(function () {
//獲取選中項的value屬性
var chkRadio = $('input:radio[name="list"]:checked').val();
if (chkRadio == null) {
alert("沒有選中項");
return false;
} else {
alert(chkRadio);
}
});
//有默認選中的情況
//獲取選中項的值，一般采用遍歷的方法，判斷哪一項選中，獲取其value屬性的值
$("#btnclick2").click(function () {
var chk2 = getRadioValue("list2");
alert(chk2);
});
function getRadioValue(radioName) {
var chkRadio = document.getElementsByName(radioName);
for (var i = 0; i < chkRadio.length; i++) {
if (chkRadio[i].checked)
return chkRadio[i].value;
}
}
})
</script>
</head>
<body>
<div>
<input type="radio" name="list" value="十分滿意" />十分滿意
<input type="radio" name="list" value="滿意" />滿意
<input type="radio" name="list" value="不滿意" />不滿意
<input type="radio" name="list" value="非常差" />非常差
</div>
<br />
<div>
<input type="radio" name="list2" value="十分滿意2" checked="checked" />十分滿意2
<input type="radio" name="list2" value="滿意2" />滿意2
<input type="radio" name="list2" value="不滿意2" />不滿意2
<input type="radio" name="list2" value="非常差2" />非常差2
</div>
<input type="button" value="確定" id="btnclick" />
<input type="button" value="確定2" id="btnclick2" />
</body>
</html>
演示截圖：
1.沒有默認選中項的情況下，獲取為null：
2.沒有默認選中項的情況下，獲取選中項的value值：
3.有選中項的情況下，獲取選中項的值：
以上就是本文的全部內(nèi)容，希望這個方法也能給遇到相同問題的其他人帶來幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Jquery 獲取表單text,areatext,radio,checkbox,select值的代碼
- 使用jQuery獲取radio/checkbox組的值的代碼收集
- jquery獲取ASP.NET服務(wù)器端控件dropdownlist和radiobuttonlist生成客戶端HTML標(biāo)簽后的value和text值
- jQuery中獲取Radio元素值的方法
- 如何使用Jquery獲取Form表單中被選中的radio值
- jquery判斷RadioButtonList和RadioButton中是否有選中項示例
- Jquery 改變radio/checkbox選中狀態(tài),獲取選中的值(示例代碼)
- jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)
- jQuery根據(jù)ID獲取input、checkbox、radio、select的示例
- jquery獲取radio值(單選組radio)
- JQuery判斷radio是否選中并獲取選中值的示例代碼
- JQuery判斷radio（單選框）是否選中和獲取選中值方法總結(jié)
相關(guān)文章
如何實現(xiàn)星星評價（jquery.raty.js插件）
本文主要分享了用jQuery插件jquery.raty.js實現(xiàn)星星評價功能：后臺傳數(shù)據(jù)，前臺顯示星星個數(shù)的具體方法。有很好的參考價值，需要的朋友一起來看下吧2016-12-12
選擇器中的空格是不容忽視的，多一個空格或少一個空格也許得到的結(jié)果會截然不同的，下面以一個示例為大家詳細介紹下到底有什么不同，感興趣的朋友額可以參考下2013-08-08
這篇文章主要介紹了jQuery實現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應(yīng)的頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JQuery替換DOM節(jié)點的方法,實例分析了jQuery中replaceWith()和replaceAll()方法的相關(guān)使用技巧與注意事項,需要的朋友可以參考下2015-06-06
JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
這篇文章主要是對JS和JQUERY獲取頁面大小,滾動條位置,元素位置的示例代碼進行了介紹。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jquery刪除指定子元素代碼實例,本文使用較簡單的方法實現(xiàn)了這個需求,代碼一看就懂,需要的朋友可以參考下2015-01-01
基于jQuery的樹控件實現(xiàn)代碼(asp.net+json)
一個自己寫jQuery的樹控件,后臺用的是asp.net,其實只要服務(wù)器返回json就可以了2010-07-07
利用選擇器，選擇要被操作的html中的元素。2010-02-02
jQuery的ztree仿windows文件新建和拖拽功能的實現(xiàn)代碼
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。這篇文章主要介紹了jQuery的ztree仿windows文件新建和拖拽功能的實現(xiàn)代碼,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了jQuery代碼實現(xiàn)發(fā)展歷程時間軸特效代碼，帶有左右箭頭，數(shù)字時間軸選項卡切換特效，有需要的小伙伴們可以來參考下2015-07-07