jQuery簡(jiǎn)單實(shí)現(xiàn)遍歷單選框的方法

更新時(shí)間：2017年03月06日 12:06:46 作者：翱翔天地

這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)遍歷單選框的方法,涉及jQuery針對(duì)頁(yè)面表單元素的遍歷及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery簡(jiǎn)單實(shí)現(xiàn)遍歷單選框的方法。分享給大家供大家參考，具體如下：

1、問(wèn)題背景：

有四個(gè)單選框，分別為一年四季，現(xiàn)在需要判斷是否選中，如果選中這個(gè)單選框，就將其值賦值給輸入框

2、實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>遍歷單選框</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <style>
      #result{
       width: 200px;
      }
    </style>
    <script>
      $(document).ready(function(){
        $("#season").click(function(){
          var season = "";
          $("input[name='rad']").each(function(i){
            if($(this).is(":checked"))
            {
              season += "您選擇的是一年的第" + (i+1) + "季度：" + $(this).val();
            }
          });
          $("#result").val(season);
        });
      });
    </script>
  </head>
  <body>
    <div>
      <input type="radio" name="rad" id="spring" value="春季" />
      <label for="spring">春季</label>
      <input type="radio" name="rad" id="summer" value="夏季" />
      <label for="summer">夏季</label>
      <input type="radio" name="rad" id="autumn" value="秋季" />
      <label for="autumn">秋季</label>
      <input type="radio" name="rad" id="winter" value="冬季" />
      <label for="winter">冬季</label><br>
      <input type="text" id="result" /><br>
      <input type="button" id="season" value="季節(jié)"/>
    </div>
  </body>
</html>

3、實(shí)現(xiàn)效果圖：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

利用jQuery對(duì)無(wú)序列表排序的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇利用jQuery對(duì)無(wú)序列表排序的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
jQuery判斷復(fù)選框是否勾選的原理及示例
要實(shí)現(xiàn)這樣的一個(gè)功能復(fù)選框勾選時(shí)給input表單賦值，復(fù)選框取消時(shí)將表單值清除，需要的朋友可以參考下
2014-05-05
jQuery html()方法使用不了無(wú)法顯示內(nèi)容的問(wèn)題
jquery中的html方法使用不了，只能用完最基本的innerHTML把內(nèi)容展示出來(lái)
2014-08-08
jQuery的.live()和.die() 使用介紹
很多開(kāi)發(fā)者都知道jQuery的.live()方法，他們大部分知道這個(gè)函數(shù)做什么，但是并不知道是怎么實(shí)現(xiàn)的，所以用的并不那么舒適。而且他們卻從未聽(tīng)過(guò)還有解除綁定的.live()事件的.die()方法。即使你熟悉這些，但是你意識(shí)到.die()了嗎？
2011-09-09
JQuery實(shí)現(xiàn)Table的tr上移下移功能
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)Table的tr上移下移功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開(kāi)發(fā)必備
圖片輪播是網(wǎng)站中的常用功能，用于在有限的網(wǎng)頁(yè)空間內(nèi)展示一組產(chǎn)品圖片或者照片，同時(shí)還有非常吸引人的動(dòng)畫(huà)效果,本文向大家推薦12款實(shí)用的 jQuery 圖片輪播效果插件感興趣的朋友可以了解下哦
2013-01-01
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片預(yù)覽大圖效果
我們可以借助jQuery來(lái)實(shí)現(xiàn)一些很酷炫的效果，本篇為大家介紹下通過(guò)jQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過(guò)了圖片數(shù)，圖片會(huì)放大進(jìn)行預(yù)覽大圖,需要的朋友可以參考下
2014-04-04
jQuery 常用代碼集錦(必看篇)
下面小編就為大家?guī)?lái)一篇jQuery 常用代碼集錦(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JQuery事件冒泡和默認(rèn)行為代碼實(shí)例
這篇文章主要介紹了JQuery事件冒泡和默認(rèn)行為代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05