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 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
详解Bootstrap插件
Apr 25 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
JavaScript中return用法示例
Nov 29 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 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中常量,变量的作用域和生存周期
2013/08/10 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Django中的cookie和session
2019/08/27 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
什么是网络协议
2016/04/07 面试题
春节活动策划方案
2014/01/24 职场文书
小学教师国培感言
2014/02/08 职场文书
根叔历年演讲稿
2014/05/20 职场文书
企业口号大全
2014/06/12 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
家访教师心得体会
2016/01/23 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
关于Redis的主从复制及哨兵问题
2022/06/16 Redis