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下判断是否为闰年的Datetime包
Oct 26 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
常用DOM整理
Jun 16 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
Underscore源码分析
Dec 30 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 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类
2006/07/15 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
python文件操作整理汇总
2014/10/21 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python递归函数特点及原理解析
2020/03/04 Python
模范家庭事迹材料
2014/02/10 职场文书
个人合作协议书范本
2014/04/18 职场文书
环保建议书100字
2014/05/14 职场文书
教室布置标语
2014/06/26 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Python实现位图分割的效果
2021/11/20 Python
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫