转载:JQuery判断radio(单选框)是否选中和获取选中值方法总结

一、利用获取选中值判断选中

直接上代码,别忘记引用JQuery包

复制代码 代码如下:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>JQuery radio</title>
< script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
< script type="text/javascript" language="javascript">
 /*------判断radio是否有选中,获取选中的值--------*/
    $(function(){
         $("#btnSubmit").click(function(){
            var val=$('input:radio[name="sex"]:checked').val();
            if(val==null){
                alert("什么也没选中!");
                return false;
            }
            else{
                alert(val);
            }
            var list= $('input:radio[name="list"]:checked').val();
            if(list==null){
                alert("请选中一个!");
                return false;
            }
            else{
                alert(list);
            }          
         });
     });
< /script>
< /head>
 
< body>
< form id="form1" >
< input type="radio"  name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<br />
< input type="radio"  name="list" value="十分满意" />十分满意
<input type="radio" name="list" value="满意" />满意
<input type="radio" name="list" value="不满意" />不满意
<input type="radio" name="list" value="非常差" />非常差
<br />
< input type="submit" value="submit"  id="btnSubmit" />
< /form>
< /body>
< /html>

radio不能用“checked”相等来判断,只用用true来判断

复制代码 代码如下:
< script type="text/javascript">
        $(function () {
            $("input").click(function () {
                if ($(this).attr("checked")) {
                    alert("选中了");
                }
            });
        });
    </script>
< /head>
< body>
< input type="radio"/>
< /body>
< /html>

二、使用checked属性判断选中

radio不能用“checked”相等来判断,只用用true来判断

复制代码 代码如下:
< script type="text/javascript">
        $(function () {
            $("input").click(function () {
                if ($(this).attr("checked")) {
                    alert("选中了");
                }
            });
        });
    </script>
< /head>
< body>
< input type="radio"/>
< /body>
< /html>

三、jquery获取radio单选按钮的值 

复制代码 代码如下:
$("input[name='items']:checked").val(); 

另:判断radio是否选中并取得选中的值
 
如下所示:

复制代码 代码如下:
function checkradio(){
var item = $(":radio:checked");
var len=item.length;
if(len>0){
  alert("yes--选中的值为:"+$(":radio:checked").val());
}
}

四、获取一组radio被选中项的值  

复制代码 代码如下:
var item = $('input[name=items][checked]').val();  

五、设置单选按钮被选中

复制代码 代码如下:
$("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项   

JQuery radio单选框应用的更多相关文章

  1. jquery 操作input radio 单选框

    1.jquery选中单选框 2.jquery 取消单选框 3.判断是否选中 4.设置不可编辑

  2. Jquery判断单选框是否选中和获取选中的值

    第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. radio(单选框)/checkbox(复选框) 美化

    由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...

  4. TagHelper+Layui封装组件之Radio单选框

    TagHelper+Layui封装组件之Radio单选框 标签名称:cl-radio 标签属性: asp-for:绑定的字段,必须指定 asp-items:绑定单选项 类型为:IEnumerable& ...

  5. 前端 HTML form表单标签 input标签 type属性 radio 单选框

    <input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...

  6. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  7. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  8. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  9. jQuery获取单选框(复选框)选中的状态

    jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...

随机推荐

  1. js 微信支付

    引入 <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0. ...

  2. 使用ThinkPHP实现分页功能

    前几篇(上传,缩略图,验证码,自动验证表单)文章介绍的功能实现都是基于ThinkPHP框架封装好的类进行实现的,所以这次自己写一个分页类在框架中使用. 首先在根目录建一个Tools文件夹,在Tools ...

  3. AJAX的一些基础和AJAX的状态

    大佬们,我又回来了,最近好几天都没写博客了,别问我干啥去了,我只是去围观奶茶妹变成抹茶妹而已 前几天我们一起封装了一个AJAX,那今天我们来说说AJAX的一些基础和AJAX的状态码 首先,啥是AJAX ...

  4. 【代码笔记】iOS-自定义loading

    一,效果图. 二,工程图. 三, 代码. ViewController.h #import <UIKit/UIKit.h> //loading #import "GPLoadin ...

  5. 高性能JavaScript(算法和流程控制)

    在大多与编程语言中,代码的执行时间大部分消耗在循环中,是提升性能必须关注的要点之一 循环的类型 for循环(它由四部分组成:初始化.前测条件.后执行体.循环体.) for(var i = 0; i & ...

  6. Hive lateral view explode

    select 'hello', x from dual lateral view explode(array(1,2,3,4,5)) vt as x 结果是: hello   1 hello   2 ...

  7. Docker相关概念

    一.概念 ①云计算:是一种资源的服务模式,该模式可以实现随时随地,便捷按需地从可配置计算资源共享池中获取所需的资源(如网络.服务器.存储.应用及服务),资源能够快速供应并释放,大大减少了资源管理工作的 ...

  8. APP主要测试类型及测试点总结

    根据测试重点区分 一.功能性测试 根据产品需求文档编写测试用例: 根据设计文档编写测试用例: 根据UI原型图编写测试用例 二.UI测试 原型图/效果图对比 用户体验 数据模拟:需要考虑正式环境可能的数 ...

  9. IAM页面是在统一区分配的还是在混合区分配的?

    IAM页面是在统一区分配的还是在混合区分配的? IAM页面的作用这里就不说了,网上的资料很多 文章中用到的工具:查看SQLSERVER内部数据页面的小插件Internals Viewer 先建立四张表 ...

  10. Inception开源公告

    关于Inception MySQL语句的审核,在业界都已经基本被认同了,实际上也是对MySQL语句写法的统一化,标准化,而之前的人工审核,针对标准这个问题其实是很吃力的,标准越多,DBA越累,开发也越 ...