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 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
JavaScript中的继承之类继承
May 01 Javascript
轮播图组件js代码
Aug 08 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP实现微信发红包程序
2015/08/24 PHP
input的focus方法使用
2010/03/13 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
微信小程序开发探究
2016/12/27 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python连接mongodb密码认证实例
2018/10/16 Python
Python中extend和append的区别讲解
2019/01/24 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
django如何实现视图重定向
2019/07/24 Python
python中调试或排错的五种方法示例
2019/09/12 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
企业总经理职责
2014/02/02 职场文书
高校教师自荐信范文
2014/03/13 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
工厂无线对讲系统解决方案
2022/02/18 无线电