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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
php文件上传简单实现方法
2015/01/24 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python如何实现强制数据类型转换
2019/11/22 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
绿色环保家庭事迹材料
2014/08/31 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
房屋产权证明书
2015/06/19 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
Python常遇到的错误和异常
2021/11/02 Python