jQuery获取radio选中项的值实例


Posted in Javascript onJune 18, 2016
<title></title>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //没有默认选中的情况
      //先判断radio是否有选中项,再获取选中的值
      $("#btnclick").click(function () {
        //获取选中项的value属性
        var chkRadio = $('input:radio[name="list"]:checked').val();
        if (chkRadio == null) {
          alert("没有选中项");
          return false;
        } else {
          alert(chkRadio);
        }
      });

      //有默认选中的情况
      //获取选中项的值,一般采用遍历的方法,判断哪一项选中,获取其value属性的值
      $("#btnclick2").click(function () {
        var chk2 = getRadioValue("list2");
        alert(chk2);
      });

      function getRadioValue(radioName) {
        var chkRadio = document.getElementsByName(radioName);
        for (var i = 0; i < chkRadio.length; i++) {
          if (chkRadio[i].checked)
            return chkRadio[i].value;
        }
      }

    })
  </script>
</head>

<body>
  <div>
    <input type="radio" name="list" value="十分满意" />十分满意
    <input type="radio" name="list" value="满意" />满意
    <input type="radio" name="list" value="不满意" />不满意
    <input type="radio" name="list" value="非常差" />非常差
  </div>
  <br />
  <div>
    <input type="radio" name="list2" value="十分满意2" checked="checked" />十分满意2
    <input type="radio" name="list2" value="满意2" />满意2
    <input type="radio" name="list2" value="不满意2" />不满意2
    <input type="radio" name="list2" value="非常差2" />非常差2
  </div>
  <input type="button" value="确定" id="btnclick" />
  <input type="button" value="确定2" id="btnclick2" />
</body>
</html>

演示截图:

1.没有默认选中项的情况下,获取为null:

jQuery获取radio选中项的值实例

2.没有默认选中项的情况下,获取选中项的value值:

jQuery获取radio选中项的值实例

3.有选中项的情况下,获取选中项的值:

jQuery获取radio选中项的值实例

以上就是本文的全部内容,希望这个方法也能给遇到相同问题的其他人带来帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
javascript初学者常用技巧
Sep 02 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
javascript的this关键字详解
May 20 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 #Javascript
jQuery解决$符号命名冲突
Jun 18 #Javascript
prototype.js常用函数详解
Jun 18 #Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 #Javascript
Javascript中prototype的使用详解
Jun 18 #Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 #Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 #Javascript
You might like
PHP实现抓取HTTPS内容
2014/12/01 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python异常处理机制结构实例解析
2020/07/23 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
园长自我鉴定
2013/10/06 职场文书
七年级生物教学反思
2014/01/30 职场文书
20年同学聚会感言
2014/02/03 职场文书
工程质量承诺书范文
2014/03/27 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
校园广播站开场白
2015/06/01 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android