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 相关文章推荐
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
js实现右键自定义菜单
Dec 03 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
详解jQuery中的事件
Dec 14 Javascript
几种tab切换详解
Feb 03 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python实现简单的socket server实例
2015/04/29 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
python3.x实现base64加密和解密
2019/03/28 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
python爬取天气数据的实例详解
2020/11/20 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
棉花姑娘教学反思
2014/02/15 职场文书
青年文明号口号
2014/06/17 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python