Jquery操作radio的简单实例


Posted in Javascript onJanuary 06, 2014

<input name="study" type="radio" value="Jquery插件教程">Jquery插件教程
<input name="study" type="radio" value="Jquery学习">Jquery学习
<input name="study" type="radio" value="PHP学习">PHP学习
<input id="tijiao" type="button" value="确定">
<input id="set_jqeury_study" title="Jquery学习" type="button" value="将radio设定为Jquery学习">
<input name="study" type="text" value="请输入您想学到的知识">
<input id="view_input_text" type="button" value="点击我,查看到的是同样名为‘study',但是类型是TEXT的输入框里面的值">

在上面的html代码中,细心的您应该可以发现3个radio的name属性和一个text的name属性都是“study”

$(function(){
$('#tijiao').click(function(){
if ($("input:[name=study]:radio:checked").length == 0){
alert("请选择您想学习的知识");
return false;
}
var study = $("input:[name=study]:radio:checked").val();
alert("谢谢!您选择的是" + study);
})
$("#set_jqeury_study").click(function(){
var $button = $(this);
$("input:[name=study]:radio").each(function(){
if (this.value == $button.attr('title')){
this.checked=true;
}
})
})
$("#view_input_text").click(function(){
alert($("input[name=study]:text").val());
})
})

$(“input:[name=study]:radio:checked”)这段代码取得的是所有name属性为“study”而且已经被选中的radio的jquery对象,通过判断他的length 是否等于0,就可以知道这个radio选项是否有一个被选中了。$(“input[name=study]:text”)这段代码取得的是name属性为“study”的text输入框的jquery对象。
Javascript 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
jquery编写日期选择器
Mar 16 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
jQuery选择器全面总结
Jan 06 #Javascript
JavaScript定义类的几种方式总结
Jan 06 #Javascript
javascript函数定义的几种区别小结
Jan 06 #Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 #Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 #Javascript
JavaScript将数据转换成整数的方法
Jan 04 #Javascript
jquery.post用法关于type设置问题补充
Jan 03 #Javascript
You might like
PHP设计模式之装饰者模式
2012/02/29 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python 字符串操作方法大全
2014/03/11 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
实习单位鉴定评语
2014/04/26 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
教师三严三实心得体会
2014/10/11 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
党员理论学习心得体会
2016/01/21 职场文书
深入理解python协程
2021/06/15 Python