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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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
模仿OSO的论坛(四)
2006/10/09 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
js实现抽奖效果
2017/03/27 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python实现简单的四则运算计算器
2016/11/02 Python
json跨域调用python的方法详解
2017/01/11 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python 调试冷知识(小结)
2019/11/11 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
Linux的主要特性
2014/10/06 面试题
计算机专业推荐信范文
2013/11/27 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
优秀教师演讲稿
2014/05/06 职场文书
党支部承诺书
2015/01/20 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
Java中try catch处理异常示例
2021/12/06 Java/Android
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python