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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
Python版微信红包分配算法
2015/05/04 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python docx库用法示例分析
2019/02/16 Python
详解python with 上下文管理器
2020/09/02 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
团支书竞选演讲稿
2014/04/28 职场文书
2015年女生节活动总结
2015/02/27 职场文书
2015年环卫工作总结
2015/04/28 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript