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下为Event handler传递动态参数的代码
Jan 06 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
Node.js插件安装图文教程
May 06 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JavaScript文档对象模型DOM
Nov 20 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编写PDF文档生成器
2006/10/09 PHP
一个简单计数器的源代码
2006/10/09 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
python装饰器代码深入讲解
2021/03/01 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
置业顾问岗位职责
2014/03/02 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
致运动员加油稿
2015/07/21 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL