信鸽网

三种取消选中单选框radio的方法

  作者：bea

本文提供了三种取消选中radio的方式，代码示例如下: 本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。 <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/j

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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: