取消选中单选框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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 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
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
使用python实现多维数据降维操作
2020/02/24 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
python exit出错原因整理
2020/08/31 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
应届生.NET方向面试题
2015/05/23 面试题
机电一体化求职信
2014/03/10 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
班级读书活动总结
2014/06/30 职场文书
2014年档案室工作总结
2014/12/01 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript