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的项目为当前选中项

赞 (0)

相关推荐

  • jQuery设置单选按钮radio选中/不可用的实例代码

    jQuery设置单选按钮radio选中/不可用的实例代码

    因为本 part 是"jQuery日常使用篇",所以都是由具体需求出发,总结需要用到的知识点.代码写得未必很好,达到目标就好.那么我们先来看看这次的需求:色块模式基于彩色模式,即开了彩色才能开色块,彩色处于关闭的时候色块不可用,开启彩色时色块radio可用,关闭彩色时如果色块处于开的话需要把它关掉,大概就这样. 我们先来看看演示效果: 我们接下来看看jQuery对单选按钮 radio 的操作. 1. 彩色处于关闭的时候色块不可用 需要两步,当页面打开时,检测如果彩色关闭的话,让色块的&

  • jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法

    如下所示: 喜欢<input type="radio" name="likea" id="" value="3" /> 一般<input type="radio" name="likea" id="" value="2" /> 不喜欢<input type="radio" name="li

  • jQuery获取选中单选按钮radio的值

     实例1: <div id="wrap"> <input type="radio" name="payMethod" value="1" />男 <input type="radio" name="payMethod" value="2" />女 </div> 获取一组单选按钮对象:var obj_payPlatform

  • jquery判断单选按钮radio是否选中的方法

    本文实例讲述了jquery判断单选按钮radio是否选中的方法.分享给大家供大家参考.具体如下: html代码如下: <input type="radio" id="d1" name="ra" value="a" checked="checked" /> <input type="radio" id="d2" name="ra"

  • JQuery判断radio单选框是否选中并获取值的方法

    一.设置选中方法 代码如下: $("input[name='名字']").get(0).checked=true; $("input[name='名字']").attr('checked','true'); $("input[name='名字']:eq(0)").attr("checked",'checked'); $("input[name='radio_name'][checked]").val();

  • 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"> <

  • 使用jQuery动态设置单选框的选中效果

    一.需要实现的效果 这里使用jQuery来实现.需要实现的效果如下:当下拉条改变时,单选框选中的值随之变化. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>动态设置单选框的选中</title> <!-- 作者:Harrison 时间:2018-12-05 描述:当下拉条改变时,动态的设置单选框的值 --> </head&

  • JQuery判断radio是否选中并获取选中值的示例代码

    其他对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&

  • jquery判断复选框是否被选中的方法

    jquery 判断复选框是否选中以及如何选中的问题做一下总结. 进入正题,还是当页面有如下一组复选框的时候: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type=&q

  • jquery判断复选框是否选中进行答题提示特效

    jquery判断复选框是否选中进行答题提示特效

    本文实例讲述了jquery判断复选框是否选中进行答题提示特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.实现的原理: 第一步:判断用户选择哪一项,即哪个复选框被选中 第二步:根据复选框的选中情况给出相应的提示 二.下面来看主体程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <

  • js和jquery分别验证单选框、复选框、下拉框

    本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen

  • vue radio单选框,获取当前项(每一项)的value值操作

    前言 本文使用了lable关联选中,实际使用中如果不需要,直接将循环语句 v-for 写在 input标签上就可以 1.使用v-for循环的radio单选框 01)需要注意的是,这是使用的是 change 事件,而不是 click 点击事件 <template> <div> <label v-for="(item, index) in radioData" :key="index"> <input type="ra

  • layui 实现自动选择radio单选框(checked)的方法

    HTML表单: <div class="layui-form-item"> <label class="layui-form-label">消息通知</label> <div class="layui-input-block"> <input name="is_notice" value="1" type="radio" title=

  • jQuery判断网页是否已经滚动到浏览器底部的实现方法

    有些需求中,需要当用户滚动到浏览器底部的时候,再加载新的内容.笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了. 在了解下面的知识点之前,笔者这里先介绍几个概念. $(window).height(); //用于获取浏览器显示区域的高度 $(window).width(); //用于获取浏览器显示区域的宽度 $(document.body).height(); //获取页面文档的高度 $(document.body).width(); //获取页面文档的宽度 $(docume

随机推荐