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的with 语句的使用方法
May 09 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 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 多进程 解决难题
2009/06/22 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
python strip()函数 介绍
2013/05/24 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python3字符串操作总结
2019/07/24 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Python如何急速下载第三方库详解
2020/11/02 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
网上开店必备创业计划书
2014/01/26 职场文书
总会计师岗位职责
2014/02/19 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android