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 相关文章推荐
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
Vue代码整洁之去重方法整理
Aug 06 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
Python实现将xml导入至excel
2015/11/20 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
详解Python中的测试工具
2019/06/09 Python
学习和使用python的13个理由
2019/07/30 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
django框架ModelForm组件用法详解
2019/12/11 Python
如何理解Python中的变量
2020/06/01 Python
在keras中实现查看其训练loss值
2020/06/16 Python
医学院护理专业应届生求职信
2013/11/12 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
常务副总经理任命书
2014/06/05 职场文书
销售顾问工作计划书
2014/09/15 职场文书
会计工作态度自我评价
2015/03/06 职场文书
用电申请报告范文
2015/05/18 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL