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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
vue-router 手势滑动触发返回功能
Sep 30 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
基于angular实现树形二级表格
Oct 16 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
PHP安装问题
2006/10/09 PHP
第九节--绑定
2006/11/16 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
python使用心得之获得github代码库列表
2014/06/25 Python
利用python画出折线图
2018/07/26 Python
Python根据成绩分析系统浅析
2019/02/11 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python实现一个优先级队列的方法
2020/07/31 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
家长会演讲稿范文
2014/01/10 职场文书
2014年妇联工作总结
2014/11/21 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
三下乡活动心得体会
2016/01/23 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js