三种取消选中单选框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 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
js动态切换图片的方法
Jan 20 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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/07/17 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
移动端js图片查看器
2016/11/17 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python dict remove数组删除(del,pop)
2013/03/24 Python
python写入已存在的excel数据实例
2018/05/03 Python
基于python生成器封装的协程类
2019/03/20 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
工作表扬信的范文
2014/01/10 职场文书
迎国庆横幅标语
2014/10/08 职场文书
入股合作协议书
2014/10/12 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
大学生暑期实践报告
2015/07/13 职场文书
七年级作文之环保作文
2019/10/17 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技