编程 Javascript

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：

2.没有默认选中项的情况下，获取选中项的value值：

jQuery获取radio选中项的值实例

3.有选中项的情况下，获取选中项的值：

jQuery获取radio选中项的值实例

以上就是本文的全部内容，希望这个方法也能给遇到相同问题的其他人带来帮助，也希望大家多多支持三水点靠木。

jQuery获取radio选中项的值实例

- Author -

酷小孩

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Convert Seconds To Hours

Jun 16 Javascript

window.location和document.location的区别分析

Dec 23 Javascript

Javascript 强制类型转换函数

May 17 Javascript

JSON序列化与解析原生JS方法且IE6和chrome测试通过

Sep 05 Javascript

深入理解JavaScript系列（26）：设计模式之构造函数模式详解

Mar 03 Javascript

jquery实现实时改变网页字体大小、字体背景色和颜色的方法

Aug 05 Javascript

javascript设置和获取cookie的方法实例详解

Jan 05 Javascript

省市选择的简单实现(基于zepto.js)

Jun 21 Javascript

Vue前端开发规范整理(推荐)

Apr 23 Javascript

浅析vue给不同环境配置不同打包命令

Aug 17 Javascript

vue-router实现编程式导航的代码实例

Jan 19 Javascript

Vue环境搭建+VSCode+Win10的详细教程

Aug 19 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