取消选中单选框radio的三种方式示例介绍

前端技术 2023/09/08 JavaScript
本文提供了三种取消选中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>

本文地址：https://www.stayed.cn/item/22629

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案