码迷,mamicode.com
首页 > Web开发 > 详细

使用jquery获取radio的值

时间:2014-09-19 23:49:46      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   使用   java   ar   strong   

使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项:

 

1.<input type="radio" name="testradio" value="jquery获取radio的值" />jquery获取radio的值<br />
2.<input type="radio" name="testradio" value="jquery获取checkbox的值" />jquery获取checkbox的值<br />
3.<input type="radio" name="testradio" value="jquery获取select的值" />jquery获取select的值<br />

要想获取某个radio的值有以下的几种方法,直接给出代码:

1、$(‘input[name="testradio"]:checked‘).val();

2、$(‘input:radio:checked‘).val();

3、$(‘input[@name="testradio"][checked]‘);

4、

  1.$(‘input[name="testradio"]‘).filter(‘:checked‘);

差不多挺全的了,如果我们要遍历name为testradio的所有radio呢,代码如下

 1.$(‘input[name="testradio"]‘).each(function(){
 2.alert(this.value);
 3.});

如果要取具体某个radio的值,比如第二个radio的值,这样写

 1.$(‘input[name="testradio"]:eq(1)‘).val()

通过修改运行下面的实例,加深你的印象

<html>
<head>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script
 type="text/javascript">
$(function(){
    $(#go).click(function(){
        var radio = $(input[name="testradio"]).filter(:checked);
        if(radio.length)
        alert(radio.val());
        else
        alert(请选择一个radio);
        
    });
    $(#go2).click(function(){
        $(input[name="testradio"]).each(function(){
            alert(this.value);
        });
    })
    $(#go3).click(function(){
        alert($(input[name="testradio"]:eq(1)).val());
    })
})
</script>

</head>

<body>
<input type="radio" name="testradio" value="jquery获取radio的值" 
/>jquery获取radio的值<br /> <input type="radio" name="testradio"
 value="jquery获取checkbox的值" />jquery获取checkbox的值<br /> 
<input type="radio" name="testradio" value="jquery获取select的值" 
/>jquery获取select的值<br />
<button id="go">选中的那个radio的值</button>
<button id="go2">遍历所有radio的值</button>
<button id="go3">取第二个radio的值</button>
</body>
</html>

 

使用jquery获取radio的值

标签:style   blog   http   color   io   使用   java   ar   strong   

原文地址:http://www.cnblogs.com/spring_wang/p/3982619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!