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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
Ajax常用封装库——Axios的使用
May 08 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加密解密类代码
2011/11/27 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
详谈PHP编码转换问题
2015/07/28 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
php取出数组单个值的方法
2018/03/12 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
Python应用领域和就业形势分析总结
2019/05/14 Python
python爬虫之自制英汉字典
2019/06/24 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
django的ORM操作 增加和查询
2019/07/26 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
如何在pycharm中安装第三方包
2020/10/27 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
印度民族服装购物网站:BIBA
2019/08/05 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
效能监察建议书
2014/05/19 职场文书
建筑横幅标语
2014/10/09 职场文书
组织生活会发言材料
2014/12/15 职场文书
学校推普周活动总结
2015/05/07 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
只用Python就可以制作的简单词云
2021/06/07 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle