作者: 铁锚

日期: 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. Hibernate之SchemaExport的使用

    @Test public void testCreateDB(){ Configuration cfg = new Configuration().configure(); SchemaExport ...

  2. 20160213.CCPP体系详解(0023天)

    程序片段(01):全排列.c 内容概要:全排列密码库 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <std ...

  3. Twitter 架构优化之路--Twitter是如何做到每秒处理3000张图片的

    如今,Twitter每秒可以创建并保存3000张(20GB)的图片.2015年,Twitter甚至从对媒体存储策略的优化中节省出了600万美元. 但并非一开始就是这样的,2012年Twitter还主要 ...

  4. Azkaban-2.5及Plugins的安装配置

    Azkaban是由LinkedIn开发的调度工具,可以用于调度Hadoop中的相互依赖的Job.有时候,在Hadoop集群中运行的Job是相互依赖的,某些任务需要顺序的执行,这种场景下使用Azkaba ...

  5. Android Multimedia框架总结（二十三）MediaCodec补充及MediaMuxer引入（附案例）

    请尊重分享成果,转载请注明出处,本文来自逆流的鱼yuiop,原文链接:http://blog.csdn.net/hejjunlin/article/details/53729575 前言:前面几章都是 ...

  6. springMVC源码分析--HandlerMethod

    在之前的博客中我们已经接触过HandlerMethod,接下来我们简单介绍一下HandlerMethod,简单来说HandlerMethod包含的信息包括类.方法和参数的一个信息类,通过其两个构造函数 ...

  7. ROS机器人程序设计（原书第2版）学习镜像分享及使用说明

    ROS机器人程序设计(原书第2版)学习镜像分享及使用说明 系统用于ROS爱好者学习交流,也可用于其他用途,并不局限于ROS. 这款镜像文件是基于一年前的Ubuntu ROS Arduino Gazeb ...

  8. Android捕获全局异常

    Android捕获全局异常 程序避免不了出现bug,导致程序崩溃,为了尽量不影响用户体验,可以全局捕获异常 效果图 异常捕获处理前 异常捕获处理后(将程序重新启动) 捕获异常的工具类 package ...

  9. ScrollView的阻尼回弹效果实现(仿qq空间)

    玩过新浪微博,qq空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图: 这个是编辑器里面的界面效 ...

  10. 关于LT分发系统的设计构想

    git地址 https://github.com/cxyxd/LtDistribution 背景 对tomcat做集群,在多机多tomcat的情况下,如果要更新代码,只能手动的将代码复制,粘贴,然后下 ...