jQuery 操作input中radio的技巧

 更新时间:2016年07月18日 13:46:31   作者:平淡才是正  
这篇文章主要介绍了jQuery 操作input中radio的技巧的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧

通过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的技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Java中Timer的用法详解

    Java中Timer的用法详解

    Timer是比较常用的工具类,用于按时间计划执行任务。这篇文章给大家介绍java中的timer的用法详解,涉及到java timer相关知识学习,对本文感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • javascript 全角转换实现代码

    javascript 全角转换实现代码

    当客户端用户切换输入法至全角时可能您的表单提交会有漏洞哦!不过事实上js有这功能 可以将其转换为非全角字符!
    2009-07-07
  • Jquery uploadify 多余的Get请求(404错误)的解决方法

    Jquery uploadify 多余的Get请求(404错误)的解决方法

    下面小编就为大家带来一篇Jquery uploadify 多余的Get请求(404错误)的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • jQuery中before()方法用法实例

    jQuery中before()方法用法实例

    这篇文章主要介绍了jQuery中before()方法用法,以实例形式分析了before()方法的功能、定义与具体使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery的事件处理你知道多少

    jQuery的事件处理你知道多少

    这篇文章主要为大家详细介绍了jQuery的事件处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • jquery滚动条插件jScrollPane的使用介绍

    jquery滚动条插件jScrollPane的使用介绍

    jScrollPane想必大家都不陌生吧它就是所谓的jquery滚动条插件,下面为大家介绍下其具体的使用,感兴趣的朋友不要错过
    2013-11-11
  • jQuery插件-jRating评分插件源码分析及使用方法

    jQuery插件-jRating评分插件源码分析及使用方法

    该插件被广泛应用于各种需要评分的页面当中,今天作为学习,把源码拿出来分析一下,顺便学习其使用方法,需要了解的朋友可以研究下
    2012-12-12
  • JQuery控制div外点击隐藏而div内点击不会隐藏的方法

    JQuery控制div外点击隐藏而div内点击不会隐藏的方法

    这篇文章主要介绍了JQuery控制div外点击隐藏而div内点击不会隐藏的方法,涉及show、hide及stopPropagation等方法的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序

    jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序

    这篇文章主要介绍了jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • jQuery DateTimePicker 日期和时间插件示例

    jQuery DateTimePicker 日期和时间插件示例

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,这篇文章主要介绍了jQuery DateTimePicker 日期和时间插件示例,有兴趣的可以了解一下。
    2017-01-01

最新评论