取消选中单选框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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 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
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python循环语句中else的用法总结
2016/09/11 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
python 实现端口扫描工具
2020/12/18 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
介绍一下Make? 为什么使用make
2013/12/08 面试题
外企测试工程师面试题
2015/02/01 面试题
银行职员思想汇报
2013/12/31 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
公民授权委托书
2014/10/15 职场文书
五四青年节活动总结
2015/02/10 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js