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 笔记二 Array和Date对象方法
May 22 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
Vue3 中的数据侦测的实现
Oct 09 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时间戳与日期的转换
2013/06/06 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
速记Python布尔值
2017/11/09 Python
Python反射用法实例简析
2017/12/22 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
java判断三位数的实例讲解
2019/06/10 Python
pow在python中的含义及用法
2019/07/11 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
自我评价的写作规则
2014/01/06 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
运动会通讯稿150字
2014/02/15 职场文书
小班评语大全
2014/05/04 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
python多次执行绘制条形图
2022/04/20 Python