JQuery控制Radio选中方法分析


Posted in Javascript onMay 29, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
详解Node全局变量global模块
Sep 28 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 #Javascript
js实现发送验证码后的倒计时功能
May 28 #Javascript
JS实现两表格里数据来回转移的方法
May 28 #Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 #Javascript
jQuery实现html表格动态添加新行的方法
May 28 #Javascript
jquery实现用户打分评分特效
May 28 #Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 #Javascript
You might like
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
微信支付开发订单查询实例
2016/07/12 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
js事件(Event)知识整理
2012/10/11 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
Bootstrap插件全集
2016/07/18 Javascript
轮播的简单实现方法
2016/07/28 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
pytorch实现mnist分类的示例讲解
2020/01/10 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
请介绍一下Ant
2016/07/22 面试题
传播学毕业生求职信
2013/10/11 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
20年同学聚会感言
2014/02/03 职场文书
安全协议书范本
2014/04/21 职场文书
代理协议书范本
2014/04/22 职场文书
学校搬迁方案
2014/06/15 职场文书
先进基层党组织材料
2014/12/25 职场文书
工作失误检讨书
2015/01/26 职场文书
会计岗位职责范本
2015/04/02 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
现货白银电话营销话术
2015/05/29 职场文书
公司员工奖惩制度
2015/08/04 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫