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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
vue跨域解决方法
Oct 15 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
PHP Token(令牌)设计
2008/03/15 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP强制转化的形式整理
2020/05/22 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
python安装twisted的问题解析
2018/08/21 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python实现弹窗祝福效果
2019/04/07 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python ORM编程基础示例
2020/02/02 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
自我评价怎么写好呢?
2013/12/05 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python