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的文章中所有图片width大小批量设置方法
Aug 01 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python中删除某个元素的方法解析
2019/11/05 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
行政专员工作职责
2013/12/22 职场文书
物业招聘计划书
2014/01/10 职场文书
自我鉴定四大框架
2014/01/17 职场文书
设计师求职信模板
2014/05/06 职场文书
煤矿安全承诺书
2014/05/22 职场文书
田径运动会通讯稿
2014/09/13 职场文书
面试自我评价范文
2014/09/17 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS