取消选中单选框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 相关文章推荐
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php的ddos攻击解决方法
2015/01/08 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
js随机生成一个验证码
2017/06/01 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
移动端效果之Swiper详解
2017/10/09 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python实现自动登录百度空间的方法
2017/06/10 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python集合能干吗
2020/07/19 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
旅游管理专业学生求职信
2013/09/28 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
会计出纳岗位职责
2013/12/25 职场文书
网络研修随笔感言
2014/02/17 职场文书
八一建军节感言
2014/02/28 职场文书
企业管理不到位检讨书
2019/06/27 职场文书