作者: 铁锚

日期: 2013年12月21日

本文提供了三种取消选中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>

取消选中单选框radio的三种方式的更多相关文章

  1. 分享：三种取消选中单选框radio的方法

    三种取消选中radio的方式,本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. <!DOCTYPE HTML> <html ...

  2. Js、layui获取单选框radio的几种方法

    首先,编写HTML如下:   <form id="form1">         <table  border="0">        ...

  3. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

  4. 吾八哥学Selenium(三)：操作复选框checkbox/单选框radio的方法

    复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...

  5. 单选框radio总结（获取值、设置默认选中值、样式）

    单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...

  6. 单选框radio改变事件详解（用的jquery的radio的change事件）

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  7. JS实现单选按钮回显时页面效果出现，但选中单选框的值为空

    最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取 ...

  8. MFC学习单选框Radio使用

    创建单选框Radio ,ID号IDC_RADIO_NAME 1.获取单选框内容 int RadioState = ((CButton *)GetDlgItem(IDC_RADIO_NAME))-> ...

  9. 自定义单选框radio样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Java第4次实验提纲（面向对象2-继承、多态、抽象类与接口与Swing）

    PTA 题集面向对象2-进阶-多态接口内部类 第1次实验 1.1 题集5-1(Comparable) 难点:如果传入对象为null,或者传入对象的某个属性为null,怎么处理? 1.2 题集5-2(C ...

  2. 安全框架Shiro

    原文地址:https://www.cnblogs.com/learnhow/p/5694876.html 一.架构 要学习如何使用Shiro必须先从它的架构谈起,作为一款安全框架Shiro的设计相当精 ...

  3. android自定义View之3D索引效果

    效果图: 我的小霸王太卡了. 最近工作比较忙,今天搞了一下午才搞出来这个效果,这种效果有很多种实现方式,最常见的应该是用贝塞尔曲线实现的.今天我们来看另一种不同的实现方式,只需要用到 canvas.s ...

  4. iOS界面不能点击（tableView 的cell 不能使用点击事件，tableView也不能上下滚动）

    iOS开发中间遇到了很多问题,有些后来又遇到,竟然忘记怎么处理了,所以还是来写下博客记录自己遇到的问题,方便自己也方便别人. 之前想的是项目小,就用storyboard在绘制界面,但是项目慢慢的扩展, ...

  5. OpenMP实现生产者消费者模型

    生产者消费者模型已经很古老了吧,最近写了个OpenMP版的此模型之实现,来分享下. 先说一下模型的大致做法是: 1.生产者需要取任务,生产产品. 2.消费者需要取产品,消费产品. 生产者在生产某个产品 ...

  6. PGM：概率论基础知识

    http://blog.csdn.net/pipisorry/article/details/52459847 概率图模型PGM:概率论基础知识 独立性与条件独立性 独立性 条件独立性 也就是表示给定 ...

  7. Github上的Android项目介绍之ListViewAnimation（针对listView item的侧滑菜单）（1）

    demo源码,需要可以下载 1.这是一个github开源项目,先去github上面下载,github下载地址. 2.将SwipeMenuListView项目,导入,然后新建项目如果要引用,要设置为相应 ...

  8. 六星经典CSAPP笔记(1)计算机系统巡游

    CSAPP即<Computer System: A Programmer Perspective>的简称,中文名为<深入理解计算机系统>.相信很多程序员都拜读过,之前买的旧版没 ...

  9. Dynamics CRM2016 Supported versions of Internet Explorer and Microsoft Edge

    在CRM2016发布在即之时,让咱们看下新版的CRM对IE及Edge的支持 这次和以往不同,官方给出的不只是IE几以上支持,IE几以下不支持,而是有一个对应的系统列表,具体看下表. 当然你也可以说我I ...

  10. iOS开发之字数不一的多标签Demo

    有朋友让帮他写一个封装的字数不一的多标签视图,所以今天将代码展示一下,供大家学习 代码中封装了两种方法,分别是:1.传递数组,数组中是NSString类型的方法:2.传递数组,数组中是NSDictio ...