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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
原生JS实现$.param() 函数的方法
Aug 10 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
php分页查询的简单实现代码
2017/03/14 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
Python中的is和id用法分析
2015/01/26 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
python判断是空的实例分享
2020/07/06 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
审核会计岗位职责
2013/11/08 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
跟单文员岗位职责
2014/01/03 职场文书
保密普查工作实施方案
2014/02/25 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
医德考评自我评价
2014/09/14 职场文书
教师辞职信范文
2015/02/28 职场文书
给朋友的道歉短信
2015/05/12 职场文书
旅行社计调工作总结
2015/08/12 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS