三种取消选中单选框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 相关文章推荐
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
vue-router 学习快速入门
Mar 01 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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解答方法
2012/02/04 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
一个超级简单的python web程序
2014/09/11 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
考试不及格检讨书
2014/01/09 职场文书
优秀学生获奖感言
2014/02/15 职场文书
超市促销活动总结
2014/07/01 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2014年建筑工作总结
2014/11/26 职场文书
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS