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 面向对象全新理练之继承与多态
Dec 03 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
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 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python循环输出三角形图案的例子
2019/11/22 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
深入浅析Django MTV模式
2021/09/04 Python
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
你真的会用Mysql的explain吗
2022/03/31 MySQL
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技