jQuery獲取radio選中項(xiàng)的值實(shí)例

更新時(shí)間：2016年06月18日 11:38:48 作者：酷小孩

本文主要介紹jQuery獲取radio選中項(xiàng)的值的方法，希望能幫到大家，有需要的朋友可以參考一下。

<title></title>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //沒(méi)有默認(rèn)選中的情況
      //先判斷radio是否有選中項(xiàng)，再獲取選中的值
      $("#btnclick").click(function () {
        //獲取選中項(xiàng)的value屬性
        var chkRadio = $('input:radio[name="list"]:checked').val();
        if (chkRadio == null) {
          alert("沒(méi)有選中項(xiàng)");
          return false;
        } else {
          alert(chkRadio);
        }
      });

      //有默認(rèn)選中的情況
      //獲取選中項(xiàng)的值，一般采用遍歷的方法，判斷哪一項(xiàng)選中，獲取其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="十分滿(mǎn)意" />十分滿(mǎn)意
    <input type="radio" name="list" value="滿(mǎn)意" />滿(mǎn)意
    <input type="radio" name="list" value="不滿(mǎn)意" />不滿(mǎn)意
    <input type="radio" name="list" value="非常差" />非常差
  </div>
  <br />
  <div>
    <input type="radio" name="list2" value="十分滿(mǎn)意2" checked="checked" />十分滿(mǎn)意2
    <input type="radio" name="list2" value="滿(mǎn)意2" />滿(mǎn)意2
    <input type="radio" name="list2" value="不滿(mǎn)意2" />不滿(mǎn)意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.沒(méi)有默認(rèn)選中項(xiàng)的情況下，獲取為null：

2.沒(méi)有默認(rèn)選中項(xiàng)的情況下，獲取選中項(xiàng)的value值：

3.有選中項(xiàng)的情況下，獲取選中項(xiàng)的值：

以上就是本文的全部?jī)?nèi)容，希望這個(gè)方法也能給遇到相同問(wèn)題的其他人帶來(lái)幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何實(shí)現(xiàn)星星評(píng)價(jià)（jquery.raty.js插件）
本文主要分享了用jQuery插件jquery.raty.js實(shí)現(xiàn)星星評(píng)價(jià)功能：后臺(tái)傳數(shù)據(jù)，前臺(tái)顯示星星個(gè)數(shù)的具體方法。有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
jQuery選擇器中含有空格的使用示例及注意事項(xiàng)
選擇器中的空格是不容忽視的，多一個(gè)空格或少一個(gè)空格也許得到的結(jié)果會(huì)截然不同的，下面以一個(gè)示例為大家詳細(xì)介紹下到底有什么不同，感興趣的朋友額可以參考下
2013-08-08
jQuery實(shí)現(xiàn)輸入框的放大和縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
JQuery替換DOM節(jié)點(diǎn)的方法
這篇文章主要介紹了JQuery替換DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery中replaceWith()和replaceAll()方法的相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下
2015-06-06
JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
這篇文章主要是對(duì)JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置的示例代碼進(jìn)行了介紹。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jquery刪除指定子元素代碼實(shí)例
這篇文章主要介紹了jquery刪除指定子元素代碼實(shí)例,本文使用較簡(jiǎn)單的方法實(shí)現(xiàn)了這個(gè)需求,代碼一看就懂,需要的朋友可以參考下
2015-01-01
基于jQuery的樹(shù)控件實(shí)現(xiàn)代碼(asp.net+json)
一個(gè)自己寫(xiě)jQuery的樹(shù)控件,后臺(tái)用的是asp.net,其實(shí)只要服務(wù)器返回json就可以了
2010-07-07
jQuery學(xué)習(xí)2 選擇器的使用說(shuō)明
利用選擇器，選擇要被操作的html中的元素。
2010-02-02
jQuery的ztree仿windows文件新建和拖拽功能的實(shí)現(xiàn)代碼
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。這篇文章主要介紹了jQuery的ztree仿windows文件新建和拖拽功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-12-12
jQuery代碼實(shí)現(xiàn)發(fā)展歷程時(shí)間軸特效
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)發(fā)展歷程時(shí)間軸特效代碼，帶有左右箭頭，數(shù)字時(shí)間軸選項(xiàng)卡切換特效，有需要的小伙伴們可以來(lái)參考下
2015-07-07