jQuery简单实现遍历单选框的方法

本文实例讲述了jQuery简单实现遍历单选框的方法。分享给大家供大家参考，具体如下：

成都创新互联公司专注于企业全网营销推广、网站重做改版、靖安网站定制设计、自适应品牌网站建设、H5高端网站建设、商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为靖安等各大城市提供网站开发制作服务。

1、问题背景：

有四个单选框，分别为一年四季，现在需要判断是否选中，如果选中这个单选框，就将其值赋值给输入框

2、实现代码：

<!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="季节"/>
    </div>
  </body>
</html>

3、实现效果图：

jQuery简单实现遍历单选框的方法

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

本文题目：jQuery简单实现遍历单选框的方法
转载来于：https://www.cdcxhl.com/article24/pjjjce.html

成都网站建设公司_创新互联，为您提供标签优化、虚拟主机、自适应网站、网站改版、网站维护、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容