现在的位置: 首页 > 综合 > 正文

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

2018年10月17日 ⁄ 综合 ⁄ 共 2456字 ⁄ 字号 评论关闭

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

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

[html] view plaincopy

1.  <!DOCTYPE HTML>  

2.  <html>  

3.   <head>  

4.    <title>单选按钮取消选中的三种方式</title>  

5.    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">  

6.    </script>  

7.    <script type="text/javascript">  

8.      $(function(){  

9.          //  

10.         var $browsers = $("input[name=browser]");  

11.         var $cancel = $("#cancel");  

12.         var $byhide = $("#byhide");  

13.         var $remove = $("#remove");  

14.         //  

15.         $cancel.click(function(e){  

16.             // 移除属性,两种方式都可  

17.             //$browsers.removeAttr("checked");  

18.             $browsers.attr("checked",false);  

19.         });  

20.         //  

21.         $byhide.click(function(e){  

22.             // 切换到一个隐藏域,两种方式均可  

23.             //$("#hidebrowser").attr("checked",true);  

24.             $("#hidebrowser").attr("checked","checked");  

25.         });  

26.         //  

27.         $remove.click(function(e){  

28.             // 直接去的DOM元素,移除属性  

29.             // 如果不使用jQuery,则可以移植此方式  

30.             var checkedbrowser=document.getElementsByName("browser");  

31.             /*  

32.             $.each(checkedbrowser, function(i,v){  

33.                 v.checked = false;  

34.                 v.removeAttribute("checked");  

35.             });  

36.             */  

37.             //  

38.             var len = checkedbrowser.length;  

39.             var i = 0;  

40.             for(; i < len; i++){  

41.                 // 必须先赋值为false,再移除属性  

42.                 checkedbrowser[i].checked = false;  

43.                 // 不移除属性也可以  

44.                 //checkedbrowser[i].removeAttribute("checked");  

45.             }  

46.   

47.         });  

48.     });  

49.   </script>  

50.  </head>  

51.  <body>  

52.     <p>您喜欢哪款浏览器?</p>  

53.   

54. <form>  

55. <input style="display:none;" id="hidebrowser" type="radio" name="browser" value="">  

56. <input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br />  

57. <input type="radio" name="browser" value="Firefox">Firefox<br />  

58. <input type="radio" name="browser" value="Netscape">Netscape<br />  

59. <input type="radio" name="browser" value="Opera">Opera<br />  

60. <br />  

61. <input type="button" id="cancel" value="取消选中方式1" size="20">  

62. <input type="button" id="byhide" value="取消选中方式2" size="20">  

63. <input type="button" id="remove" value="取消选中方式3" size="20">  

64. </form>  

65.   

66.  </body>  

67. </html> 

抱歉!评论已关闭.