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 相关文章推荐
初识Node.js
Sep 03 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
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中读取文件的几个方法总结(推荐)
2016/06/03 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
从零学Python之引用和类属性的初步理解
2014/05/15 Python
Python中的异常处理学习笔记
2015/01/28 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
flask开启多线程的具体方法
2020/08/02 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
金鑫耀Java笔试题
2014/09/06 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
服装发布会策划方案
2014/05/22 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2014年党务工作总结
2014/11/25 职场文书
支行行长岗位职责
2015/02/15 职场文书
校园安全主题班会
2015/08/12 职场文书
爱护公物主题班会
2015/08/17 职场文书
2016年父亲节寄语
2015/12/04 职场文书
详解Python牛顿插值法
2021/05/11 Python
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript