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 NaN和Infinity特殊值 [译]
Sep 20 Javascript
JS的replace方法介绍
Oct 20 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
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
set_include_path在win和linux下的区别
2008/01/10 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python简易计算器制作方法代码详解
2019/10/31 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
不打扫卫生检讨书
2014/02/12 职场文书
医院搬迁方案
2014/06/14 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript