取消選中單選框radio的三種方式

時間 2019-12-05

標籤取消選中單選 radio 三種方式简体版

原文原文鏈接

本文提供了三種取消選中radio的方式，代碼示例以下:javascript

本文依賴於jQuery,其中第一種，第二種方式是使用jQuery實現的，第三種方式是基於JS和DOM實現的。html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。