取消选中单选框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 相关文章推荐
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
js中top的作用深入剖析
Mar 04 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
js表单验证实例讲解
Mar 31 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
10分钟学会js处理json的常用方法
Dec 06 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 网页过期时间的控制代码
2009/06/29 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
nodejs基础知识
2017/02/03 NodeJs
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
5个很好的Python面试题问题答案及分析
2018/01/19 Python
django用户登录和注销的实现方法
2018/07/16 Python
详解Python with/as使用说明
2018/12/13 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
优秀士兵个人事迹材料
2014/01/19 职场文书
保护母亲河倡议书
2014/04/14 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
Golang 入门 之url 包
2022/05/04 Golang
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers