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 获取图片尺寸及放大图片
Sep 04 Javascript
浅谈javascript回调函数
Dec 07 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
纯js实现动态时间显示
Sep 07 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
在js中修改html body的样式
Nov 11 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 危险函数全解析
2009/09/09 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php自定义错误处理用法实例
2015/03/20 PHP
php中define用法实例
2015/07/30 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
JS定时器实例
2013/04/17 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
再谈javascript原型继承
2014/11/10 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python中format()格式输出全解
2019/04/12 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
女生节标语
2014/06/26 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
整改通知书
2015/04/20 职场文书
入党积极分子考察意见
2015/06/02 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
装修安全责任协议书
2016/03/22 职场文书