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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
动态加载js的方法汇总
Feb 13 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
Vue异步加载about组件
Oct 31 Javascript
node.js中npm包管理工具用法分析
Feb 14 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
SSI指令
2006/11/25 PHP
php7性能提升的原因详解
2019/10/13 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
自荐信要包含哪些内容
2013/11/06 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
承诺书范文
2014/06/03 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
教师个人教学反思
2016/02/23 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS