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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
js word表格动态添加代码
Jun 07 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
php MessagePack介绍
2013/10/06 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
同步文本框内容JS代码实现
2016/08/04 Javascript
js date 格式化
2017/02/15 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
用js实现放大镜效果
2020/10/28 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
详解flask表单提交的两种方式
2018/07/21 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
《春笋》教学反思
2014/04/15 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android