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 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
vue 授权获取微信openId操作
Nov 13 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中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python是编译运行的验证方法
2015/01/30 Python
Python中的引用知识点总结
2019/05/20 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
用python实现一个简单的验证码
2020/12/09 Python
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
超市5.1促销活动
2014/01/15 职场文书
党员带头倡议书
2015/04/29 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书