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代码
Oct 09 Javascript
XENON基于JSON变种
Jul 27 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
DWR中各种java方法的调用
May 04 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
可以在线执行PHP代码包装修正版
2008/03/15 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
JS跨域代码片段
2012/08/30 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
js的对象与函数详解
2019/01/21 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
Python多线程学习资料
2012/12/19 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python 多进程和数据传递的理解
2017/10/09 Python
浅谈Python NLP入门教程
2017/12/25 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
离婚协议书格式
2015/01/26 职场文书
庆七一晚会主持词
2015/06/30 职场文书
PHP解决高并发问题
2021/04/01 PHP
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL