三种取消选中单选框radio的方法


Posted in Javascript onSeptember 09, 2014

本文提供了三种取消选中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中汉字显示乱码问题(已解决)
Dec 27 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
setTimeout学习小结
Feb 08 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 #Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 #Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 #Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 #Javascript
点击button获取text内容并改变样式的js实现
Sep 09 #Javascript
js 数组去重的四种实用方法
Sep 09 #Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 #Javascript
You might like
php下获取客户端ip地址的函数
2010/03/15 PHP
url decode problem 解决方法
2011/12/26 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
python使用正则来处理各种匹配问题
2019/12/22 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
工程售后服务承诺书
2014/05/21 职场文书
天坛导游词
2015/02/02 职场文书
护士节慰问信
2015/02/15 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
利用Python判断你的密码难度等级
2021/06/02 Python