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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
python自定义类并使用的方法
2015/05/07 Python
python清理子进程机制剖析
2017/11/23 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
党员身份证明材料
2015/06/19 职场文书
天气温馨提示语
2015/07/14 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技