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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
js变量提升深入理解
Sep 16 Javascript
vue axios用法教程详解
Jul 23 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
使用JS实现动态时钟
Mar 12 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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(二)
2012/03/21 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
canvas时钟效果
2017/02/16 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
简单实现js拖拽效果
2017/07/25 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
决心书范文
2014/03/11 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
导游词之太湖
2019/10/08 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL