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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
vue中使用rem布局代码详解
Oct 30 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中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
javascript 写类方式之八
2009/07/05 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
土木工程师岗位职责
2013/11/24 职场文书
八年级生物教学反思
2014/01/22 职场文书
股东合作协议书范本
2014/04/14 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书