jQuery 操作input中radio的技巧


Posted in Javascript onJuly 18, 2016

通过jQuery获取页面中的所有radio对象,遍历页面中的radio,取消选中的标签,因为使用到jQuery时间,因此引用到了网上公共的js,这只是本人的一些总结,大神勿喷。

<html>
<head>
<title>取消</title>
<script language="javascript">
function _onclick() {
$("input[name='ra']:checked").val();
var radios = document.getElementsByName("ra");
for (i = 0; i < radios.length; i++) {
if (radios[i].checked) {
radios[i].checked=false;
break;
}
}
}
function _onclick1() {
var item = $("input:radio[name='ra'][checked]").val(); 
alert(item)
var radios = $("input[name='ra']");
for (i = 0; i < radios.length; i++) {
if (radios[i].checked) {
radios[i].checked=false;
break;
}
}
}
function _onclick2() {
var radios = $("input[type='radio']");
for (i = 0; i < radios.length; i++) {
if (radios[i].checked) {
radios[i].checked=false;
}
}
}
</script>
</head>
<body>
<div><ol>
<li><input type="radio" name="ra" value="1">1</li>
<li><input type="radio" name="ra" value="2">2</li>
<li><input type="radio" name="ra" value="3" checked>3</li>
<li><input type="radio" name="ra" value="4">4</li>
<li><input type="radio" name="ra" value="5">5</li>
<li><input type="radio" name="ra" value="6">6</li>
<li><input type="radio" name="ra" value="7">7</li>
<li><input type="radio" name="ra" value="8">8</li> 
</ol></div>
<div><ol>
<li><input type="radio" name="ra1" value="1">1</li>
<li><input type="radio" name="ra1" value="2">2</li>
<li><input type="radio" name="ra1" value="3" checked>3</li>
<li><input type="radio" name="ra1" value="4">4</li>
<li><input type="radio" name="ra1" value="5">5</li>
<li><input type="radio" name="ra1" value="6">6</li>
<li><input type="radio" name="ra1" value="7">7</li>
<li><input type="radio" name="ra1" value="8">8</li> 
</ol></div>
<input type="button" value="GetValue1" onclick="_onclick()" />
<input type="button" value="GetValue2" onclick="_onclick1()" />
<input type="button" value="GetValue3" onclick="_onclick2()" />
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
</body>
</html>

文中使用3中获取radio对象的方式,前两种使用的比较多,第三种直接通过type标签获取对象,有可能获取到页面中所有的radio对象,因此不推荐使用。

以上所述是小编给大家介绍的jQuery 操作input中radio的技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 #Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 #Javascript
浅析JavaScript中的array数组类型系统
Jul 18 #Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 #Javascript
javascript时间差插件分享
Jul 18 #Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 #Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 #Javascript
You might like
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php静态文件生成类实例分析
2015/01/03 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
js格式化时间小结
2014/11/03 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python类定义和类继承详解
2015/05/08 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python读文件的步骤
2019/10/08 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
大学毕业生自荐书怎么写?
2014/01/06 职场文书
农贸市场管理制度
2014/01/31 职场文书
继承权公证书
2014/04/09 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL