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的一种模块模式
Mar 22 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
TS 类型收窄教程示例详解
Sep 23 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python中比较两个列表的实例方法
2019/07/04 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
新领导上任欢迎词
2014/01/13 职场文书
教师节活动主持词
2014/04/02 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2016年十一促销广告语
2016/01/28 职场文书
技术入股合作协议书
2016/03/21 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
python 中的jieba分词库
2021/11/23 Python