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 indexOf使用方法
Aug 19 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
$.extend 的一个小问题
Jun 18 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
实例分析javascript中的异步
Jun 02 Javascript
vue中配置scss全局变量的步骤
Dec 28 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
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
python中异常报错处理方法汇总
2016/11/20 Python
python学生信息管理系统
2018/03/13 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
个人自我剖析材料
2014/02/07 职场文书
实验教师岗位职责
2014/02/13 职场文书
安全责任书模板
2014/07/22 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
小学数学教学随笔
2015/08/14 职场文书
小学班主任教育随笔
2015/08/15 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技