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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
js 操作select相关方法函数
Dec 06 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
js用正则表达式筛选年月日的实例方法
Jan 04 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 CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
require.js的用法详解
2015/10/20 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
2014年机关植树节活动方案
2014/02/27 职场文书
党风廉政承诺书
2014/03/27 职场文书
毕业寄语大全
2014/04/09 职场文书
协议书格式
2014/04/23 职场文书
银行求职自荐信
2014/06/30 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers