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实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
js实现旋转木马效果
Mar 17 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
一个取得文件扩展名的函数
2006/10/09 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
jQuery实现切换字体大小的方法
2015/03/10 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
node.js如何操作MySQL数据库
2020/10/29 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python如何解除一个装饰器
2020/08/07 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
局域网定义和特性
2016/01/23 面试题
幼儿园小班家长寄语
2014/04/02 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python