JQuery控制Radio选中方法分析

更新时间：2015年05月29日 09:18:40 作者：wo_soul

这篇文章主要介绍了JQuery控制Radio选中方法,涉及jQuery表单操作及鼠标事件响应的方法,需要的朋友可以参考下

本文实例讲述了JQuery控制Radio选中方法。分享给大家供大家参考。具体如下：

方法1：

$(function () { 
  $("#spanNan").click(function () { 
  $("#Radio1").attr("checked", true); 
  $("#Radio2").attr("checked", false); 
  });
  $("#spanNv").click(function () {
  $("#Radio2").attr("checked", true);
  $("#Radio1").attr("checked", false);
  });
})

方法2：（简单方法）

$(function () {
  $("#spanNan").click(function () {
  //$("#Radio1").attr("checked", true);
  //$("#Radio2").attr("checked", false);
  $("#Radio1").click();
  });
  $("#spanNv").click(function () {
  //$("#Radio2").attr("checked", true);
  //$("#Radio1").attr("checked", false);
  $("#Radio2").click();
  });
})

<input id="Radio2" type="radio" name="sex"/>
<label for="Radio2">女</label>

总结：

HTML的Radio控件若要实现单选，比如本例中男女的选择，需要给Radio添加name属性，且值相同；例：name=“sex”。

默认选上radio:

jQuery(document).ready(function(){
  $("input[name=targetBlank]:eq(0)").attr("checked",'checked');
  $("input[name=status]:eq(0)").attr("checked",'checked');
});

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

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

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

$('input[name="testradio"]:checked').val();

$('input:radio:checked').val();

$('input[@name="testradio"][checked]');

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

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

$('input[name="testradio"]').each(function(){alert(this.value);});

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

<script type="text/javascript">
$(document).ready(function(){
  $("input[@type=radio][name=sex][@value=1]").attr("checked",true);
}); 
</script>

您的性别：

<input type="radio" name="sex" value="1" <s:if test="user.sex==1">checked</s:if>/>男 
<input type="radio" name="sex" value="0" <s:if test="user.sex==0">checked</s:if>/>女

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

JQuery
Radio

jquery中val()方法是从最后一个选项往前读取的
这篇文章主要介绍了jquery中val()方法是从最后一个选项往前读取的,需要的朋友可以参考下
2015-09-09
jQuery ajax serialize()方法的使用以及常见问题解决
使用ajax时，常常需要拼装input数据为'name=abc&sex=1'这种形式，用JQuery的serialize方法可以轻松的完成这个工作接下来介绍jQuery ajax - serialize() 方法定义和用法，感兴趣的朋友可以了解下啊，希望本文对你有所帮助
2013-01-01
jquery 交替为表格添加样式的代码
学习了jquery,发现其功能真的很令我惊讶，为表格添加背景色用css也可以实现，却不得不在<tr>标签里一行一行地添加，但用jquery只需四行代码，就是这样精简的用法，让我对jquery产生了极大的兴趣，也不得不惊叹新兴的技术所带来的效率！
2010-01-01
jquery自定义属性(类型/属性值)
属性的类型可以为：图片、文本框、按钮，然后选择需要设置的属性值：src、width、height、title、value等等，具体实现如下，感兴趣的朋友可以参考下哈
2013-05-05
jQuery 可以拖动的div实现代码脚本之家修正版
最近研究了一下jQuery，觉得真的是一个很不错的js库，其他的不说，关键是有翔实的文档，这点是非常关键的。
2009-06-06
基于jquery库的tab新形式使用
本文将介绍基于jquery库的tab新形式使用,需要的朋友可以参考下
2012-11-11
jQuery基本选择器之标签名选择器
这篇文章主要介绍了jQuery基本选择器之标签名选择器的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
jQuery Ajax 加载数据时异步显示加载动画
这篇文章主要介绍了jQuery Ajax 加载数据时异步显示加载动画的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
jquery实现手风琴展开效果
这篇文章主要为大家详细介绍了jquery实现手风琴展开效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
jQuery实现增删改查
这篇文章主要为大家详细介绍了jQuery实现增删改查，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12