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学习笔记1 数据类型
Jan 11 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 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
第一节--面向对象编程
2006/11/16 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python re模块的高级用法详解
2018/06/06 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
英文商务邀请信
2014/01/22 职场文书
一年级数学教学反思
2014/02/01 职场文书
学校读书活动总结
2014/06/30 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
销售会议开幕词
2015/01/28 职场文书
合同纠纷调解书
2015/05/20 职场文书
英雄儿女观后感
2015/06/09 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android