依赖于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>

稳定

产品高可用性高并发

贴心

项目群及时沟通

专业

产品经理1v1支持

快速

MVP模式小步快跑

承诺

我们选择声誉

坚持

10年专注高端品质开发
  • 返回顶部