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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
vue实现随机验证码功能的实例代码
Apr 30 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大转盘中奖概率算法实例
2014/10/21 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
javascript基础知识讲解
2017/01/11 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
几个MySql的面试题
2013/04/22 面试题
中英双版中文教师求职信
2013/10/27 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
会计岗位职责范本
2015/04/02 职场文书
篮球拉拉队口号
2015/12/25 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js