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


Posted in Javascript onMarch 06, 2017

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

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程序设计有所帮助。

Javascript 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
jQuery在header中设置请求信息的方法
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 #Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 #Javascript
jquery获取select,option所有的value和text的实例
Mar 06 #Javascript
Bootstrap按钮组简单实现代码
Mar 06 #Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 #Javascript
Javascript中引用类型传递的知识点小结
Mar 06 #Javascript
You might like
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Python BS4库的安装与使用详解
2018/08/08 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
python链表类中获取元素实例方法
2021/02/23 Python
机电工程专业应届生求职信
2013/10/03 职场文书
销售求职信范文
2014/05/26 职场文书
水电施工员岗位职责
2015/04/11 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Python制作表白爱心合集
2022/01/22 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript