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高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JS实现上传图片实时预览功能
2017/05/22 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
js实现蒙版效果
2020/01/11 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
用python与文件进行交互的方法
2018/03/01 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
党员自我批评与反省材料
2014/02/10 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
委托培训协议书
2014/11/17 职场文书
2014年药房工作总结
2014/11/22 职场文书
2014年教研工作总结
2014/12/06 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书