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

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

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

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

1、問題背景：

有四個(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)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

jquery中g(shù)et和post的簡單實(shí)例
本篇文章主要是對(duì)jquery中g(shù)et和post的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jquery ajax 請(qǐng)求小技巧實(shí)例分析
這篇文章主要介紹了jquery ajax 請(qǐng)求小技巧,結(jié)合實(shí)例形式分析了jquery ajax請(qǐng)求操作相關(guān)配置與使用技巧,需要的朋友可以參考下
2019-11-11
JQuery Tips相關(guān)(1)----關(guān)于$.Ready()
學(xué)習(xí)jQuery的第一件事是：如果你想要一個(gè)事件運(yùn)行在你的頁面上，你必須在$(document).ready()里調(diào)用這個(gè)事件。所有包括在$(document).ready()里面的元素或事件都將會(huì)在DOM完成加載之后立即加載，并且在頁面內(nèi)容加載之前。
2014-08-08
jquery $.each 和for怎么跳出循環(huán)終止本次循環(huán)
如何在jquery 中的循環(huán)中終止本次循環(huán)或者跳出循環(huán)呢？經(jīng)搜索發(fā)現(xiàn)個(gè)不錯(cuò)的方法，大家不妨參考下，希望對(duì)大家有所幫助
2013-09-09
jQuery Validate 驗(yàn)證,校驗(yàn)規(guī)則寫在控件中的具體實(shí)例
本篇文章主要是對(duì)jQuery Validate 驗(yàn)證,校驗(yàn)規(guī)則寫在控件中的具體實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery中的deferred使用方法
deferred對(duì)象是jQuery的回調(diào)函數(shù)解決方案，jQuery之前的版本中異步回調(diào)這塊做的不是很好，所以后期補(bǔ)上了該解決方案。接下來通過本文給大家介紹jQuery中的derferred使用方法，非常不錯(cuò)，需要的朋友參考下
2017-03-03
深入學(xué)習(xí)jQuery Validate表單驗(yàn)證
這篇文章主要針對(duì)jQuery Validate表單驗(yàn)證為大家進(jìn)行詳細(xì)介紹，如何在class屬性里面并定義錯(cuò)誤信息的提示，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery組件easyui基本布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery easyui基本布局實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
Jquery使用原生AJAX方法請(qǐng)求數(shù)據(jù)
本文詳細(xì)講解了Jquery使用AJAX方法請(qǐng)求數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-02-02
jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)點(diǎn)擊其他地方讓菜單消失的實(shí)現(xiàn)思路與解決方法,需要的朋友可以參考下
2016-04-04