jQuery实现遍历单选框

来源:互联网 发布:巴纳姆效应 知乎 编辑:程序博客网 时间:2024/05/21 14:00
1、问题背景     有四个单选框,分别为一年四季,现在需要判断是否选中,如果选中这个单选框,就将其值赋值给输入框2、实现源码[html] view plain copy⃕print?    <!DOCTYPE html>      <html>          <head>              <meta charset="UTF-8">              <title>遍历单选框</title>              <script type="text/javascript" src="../js/jquery-1.12.3.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="季节"/>              </div>          </body>      </html>  
3、实现结果
0 0
原创粉丝点击