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 相关文章推荐
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
js本地图片预览实现代码
Oct 09 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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统计二维数组元素个数的方法
2013/11/12 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python从MP3文件获取id3的方法
2015/06/15 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
在python中做正态性检验示例
2019/12/09 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
单位在职证明范本
2014/01/09 职场文书
西式婚礼证婚词
2014/01/12 职场文书
教师对学生的寄语
2014/04/03 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
国防教育标语
2014/10/08 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
歌咏比赛主持词
2015/06/29 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android