取消选中单选框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 学习笔记 选择器之三
Jul 23 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php类常量用法实例分析
2015/07/09 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
javascript new fun的执行过程
2010/08/05 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
用python与文件进行交互的方法
2018/03/01 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
幼儿发展评估方案
2014/06/11 职场文书
捐助倡议书
2015/01/19 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
休假证明书
2015/06/24 职场文书
2015中学学校工作总结
2015/07/20 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Python 视频画质增强
2022/04/28 Python