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

最新推荐文章于 2024-01-18 08:56:55 发布

中下游国外我

最新推荐文章于 2024-01-18 08:56:55 发布

阅读量1.4k

点赞数

分类专栏： javascript EasyUI JQuery 文章标签： jquery javascript dom

JQuery 同时被 3 个专栏收录

42 篇文章

订阅专栏

javascript

19 篇文章

订阅专栏

EasyUI

11 篇文章

订阅专栏

本文介绍三种取消选中单选按钮（Radio）的方法，包括使用jQuery移除checked属性、通过切换到隐藏域取消选中状态及直接操作DOM元素取消选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：验证有效。

http://blog.youkuaiyun.com/renfufei/article/details/17465267

本文提供了三种取消选中radio的方式，代码示例如下:

本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。

[html]view plaincopy 
   
 <!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>  