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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
浅析return false的正确使用
Nov 04 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
javascript实现的简单计时器
Jul 19 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 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
服务器端解压缩zip的脚本
2006/12/22 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
python基础教程之缩进介绍
2014/08/29 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
Python日志器使用方法及原理解析
2020/09/27 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
中学生期末评语
2014/02/03 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers