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 相关文章推荐
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
JavaScript手机振动API
Jun 11 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
究竟什么是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木马攻击防御之道
2008/03/24 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript回车完美实现tab切换功能
2014/03/13 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
python requests 使用快速入门
2017/08/31 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
使用Python读取大文件的方法
2018/02/11 Python
python实现两个文件合并功能
2018/04/01 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
python画图常规设置方式
2020/03/05 Python
python求解汉诺塔游戏
2020/07/09 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
班级读书活动总结
2014/06/30 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2015年见习期工作总结
2014/12/12 职场文书
工程服务质量承诺书
2015/04/29 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js