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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
优化javascript的执行速度
Jan 23 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
JS自定义右键菜单实现代码解析
Jul 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 程序员也要学会使用“异常”
2009/06/16 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
使用python编写监听端
2018/04/12 Python
pandas重新生成索引的方法
2018/11/06 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
女子职高个人自荐书
2014/02/01 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
投标邀请书范本
2015/02/02 职场文书
教师个人培训总结
2015/02/11 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python