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 easyui的tabs使用时的问题
Mar 23 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
BootStrap前端框架使用方法详解
Feb 26 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
总结js函数相关知识点
2018/02/27 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python中的itertools的使用详解
2020/01/13 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
在Python中实现字典反转案例
2020/12/05 Python
Internet主要有哪些网络群组成
2015/12/24 面试题
产品包装策划方案
2014/05/18 职场文书
元旦晚会活动总结
2014/07/09 职场文书
2015年党建工作总结
2015/03/30 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP