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学习笔记(一) 编写高质量代码
Aug 09 Javascript
js三种排序算法分享
Aug 16 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Vue.js中的组件系统
May 30 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
layui table 表格模板按钮的实例代码
Sep 21 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
python异步任务队列示例
2014/04/01 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Django的CVB实例详解
2020/02/10 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
python能开发游戏吗
2020/06/11 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
文化宣传方案
2014/03/13 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
深入理解 Golang 的字符串
2022/05/04 Golang