取消选中单选框radio的三种方式示例介绍


Posted in Javascript onDecember 23, 2013

本文提供了三种取消选中radio的方式,代码示例如下:

本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的。

<!DOCTYPE HTML> 
<html> 
<head> 
<title>单选按钮取消选中的三种方式</title> 
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
// 
var $browsers = $("input[name=browser]"); 
var $cancel = $("#cancel"); 
var $byhide = $("#byhide"); 
var $remove = $("#remove"); 
// 
$cancel.click(function(e){ 
// 移除属性,两种方式都可 
//$browsers.removeAttr("checked"); 
$browsers.attr("checked",false); 
}); 
// 
$byhide.click(function(e){ 
// 切换到一个隐藏域,两种方式均可 
//$("#hidebrowser").attr("checked",true); 
$("#hidebrowser").attr("checked","checked"); 
}); 
// 
$remove.click(function(e){ 
// 直接去的DOM元素,移除属性 
// 如果不使用jQuery,则可以移植此方式 
var checkedbrowser=document.getElementsByName("browser"); 
/* 
$.each(checkedbrowser, function(i,v){ 
v.checked = false; 
v.removeAttribute("checked"); 
}); 
*/ 
// 
var len = checkedbrowser.length; 
var i = 0; 
for(; i < len; i++){ 
// 必须先赋值为false,再移除属性 
checkedbrowser[i].checked = false; 
// 不移除属性也可以 
//checkedbrowser[i].removeAttribute("checked"); 
} }); 
}); 
</script> 
</head> 
<body> 
<p>您喜欢哪款浏览器?</p> 
<form> 
<input style="display:none;" id="hidebrowser" type="radio" name="browser" value=""> 
<input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br /> 
<input type="radio" name="browser" value="Firefox">Firefox<br /> 
<input type="radio" name="browser" value="Netscape">Netscape<br /> 
<input type="radio" name="browser" value="Opera">Opera<br /> 
<br /> 
<input type="button" id="cancel" value="取消选中方式1" size="20"> 
<input type="button" id="byhide" value="取消选中方式2" size="20"> 
<input type="button" id="remove" value="取消选中方式3" size="20"> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 #Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 #Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 #Javascript
js 通用订单代码
Dec 23 #Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 #Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 #Javascript
浮动的div自适应居中显示的js代码
Dec 23 #Javascript
You might like
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
javascript延时加载之defer测试
2012/12/28 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
python中模块查找的原理与方法详解
2017/08/11 Python
python验证码识别实例代码
2018/02/03 Python
基于Python log 的正确打开方式
2018/04/28 Python
django输出html内容的实例
2018/05/27 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
总经理办公室主任岗位职责
2013/11/12 职场文书
个人查摆剖析材料
2014/02/04 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
建设投标担保书
2014/05/13 职场文书
搞笑车尾标语
2014/06/23 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
紧急迫降观后感
2015/06/15 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
2022年四月新番
2022/03/15 日漫
Java线程的6种状态与生命周期
2022/05/11 Java/Android