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更改select内option属性的方法
Oct 14 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
js实现无缝轮播图效果
Mar 09 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中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php算法实例分享
2015/07/14 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JavaScript的Cookies
2008/01/16 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
javascript基本语法
2016/05/31 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
JSON的parse()方法介绍
2019/01/31 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python 变量类型详解
2018/10/10 Python
django如何实现视图重定向
2019/07/24 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
python交互模式基础知识点学习
2020/06/18 Python
会计专业自我鉴定范文
2013/12/29 职场文书
结婚典礼证婚词
2014/01/08 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
开除员工通知
2015/04/22 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL