本文提供了三种取消选中radio的方式,代码示例如下:
本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的。
复制代码代码如下:
< !DOCTYPE HTML >
< html >
< head >
< title >单选按钮取消选中的三种方式< /title >
< script type="text/javascript" src="http://lib.**si*naapp.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 >