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 相关文章推荐
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
解析php中反射的应用
2013/06/18 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
Yii2中datetime类的使用
2016/12/17 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
asp 的 分词实现代码
2007/05/24 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
浅析node.js中close事件
2014/11/26 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
python求pi的方法
2014/10/08 Python
python编写爬虫小程序
2015/05/14 Python
python运行其他程序的实现方法
2017/07/14 Python
Python工厂函数用法实例分析
2018/05/14 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
介绍一下Make? 为什么使用make
2013/12/08 面试题
就业推荐表自我鉴定
2013/10/29 职场文书
工作收入证明范本
2015/06/12 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android