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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 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 mssql 数据库分页SQL语句
2008/12/16 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
浅析php学习的路线图
2013/07/10 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
jQuery的三种$()
2009/12/30 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
node.js中的console用法总结
2014/12/15 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
食品行业求职人的自我评价
2014/01/19 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
解决golang结构体tag编译错误的问题
2021/05/02 Golang
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
vue如何清除浏览器历史栈
2022/05/25 Vue.js