原生javascript自定義input[type=checkbox]效果
阿新 • • 發佈：2018-03-30
nat 定義 結果 native 添加 mov line query RM
上文已經講input[type=radio]的做法發布，在我做input[input=checkbox]時候，覺得會和radio做法差不多，結果是有相似之後，但也有很大不同。
不同點有
1）checkbox自帶冒泡和捕獲事件，結果就是點擊一下包裹checkbox的label會發生兩次事件，也就是checkbox選中了，然後又不選中了，所以在對label綁定事件時候，需要停止冒泡
2）選中chekbox需要使用chekbox自帶的checked屬性，設置該屬性的選中和被選中狀態，這個與radio一致
代碼如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>自定義checkbox</title> 7 <style type="text/css"> 8 #ceshi label input { 9 display: none; 10 } 11 12 #ceshi label span { 13 display: inline-block; 14 width: 18px;15 height: 18px; 16 border-radius: 50%; 17 border: 2px solid #ddd; 18 box-sizing: border-box; 19 position: relative; 20 top: 3px; 21 margin-right: 6px; 22 } 23 24 #ceshi label span.active { 25 border: 3px solid red;26 } 27 </style> 28 </head> 29 30 <body> 31 <form id="ceshi" action="test.php" method="get"> 32 33 <label> 34 <span></span> 35 <input type="checkbox" name="t1" value="這是測試1">這是測試1 36 </label> 37 <label> 38 <span></span> 39 <input type="checkbox" name="t2" value="這是測試2">這是測試2 40 </label> 41 <label> 42 <span></span> 43 <input type="checkbox" name="t3" value="這是測試3">這是測試3 44 </label> 45 <input type="submit" name="" value="提交"> 46 </form> 47 <script type="text/javascript"> 48 //原生js實現的jquery的siblings()函數 49 HTMLElement.prototype.siblings = function() { 50 let arr = []; //保存兄弟節點 51 let prev = this.previousSibling; //o的前一個同胞節點 52 //先往上查詢兄弟節點 53 while (prev) { 54 if (prev.nodeType == 1 && prev.tagName == this.tagName) { 55 arr.unshift(prev); //數組首部插入數組，保證節點順序 56 } 57 prev = prev.previousSibling; //把上一節點賦值給prev 58 } 59 //往下查詢兄弟節點 60 let next = this.nextSibling; //o的後一個同胞節點 61 while (next) { 62 if (next.nodeType == 1 && next.tagName == this.tagName) { 63 arr.push(next); //數組尾部插入，保證節點順序 64 } 65 next = next.nextSibling; //下一節點賦值給next，用於循環 66 } 67 return arr; 68 } 69 //判斷HTMLElement是否含有某個class 70 HTMLElement.prototype.hasClass = function(cls) { 71 return this.className.match(new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘)); 72 } 73 //HTMLElement對象添加類 74 HTMLElement.prototype.addClass = function(cls) { 75 if (!this.hasClass(cls)) this.className += " " + cls; 76 } 77 //HTMLElement對象刪除類 78 HTMLElement.prototype.removeClass = function(cls) { 79 if (this.hasClass(cls)) { 80 var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘); 81 this.className = this.className.replace(reg, ‘ ‘); 82 } 83 } 84 //實現函數 85 function nativeSelfRadio(dom) { 86 //減少對dom的訪問 87 var span=dom.getElementsByTagName("span")[0]; 88 var input=dom.getElementsByTagName("input")[0]; 89 //有則刪除或者不選中，沒有則添加或者選中 90 if (span.hasClass("active")) { 91 span.removeClass("active"); 92 input.checked=false; 93 }else{ 94 span.addClass("active"); 95 input.checked=true; 96 } 97 98 99 } 100 //綁定事件 101 var len=document.getElementById("ceshi").getElementsByTagName("label"); 102 for (var i = 0; i < len.length; i++) { 103 //避免返回該頁面，隱藏的checkbox依然選中 104 len[i].getElementsByTagName("input")[0].checked=false; 105 len[i].onclick=function(e){ 106 nativeSelfRadio(this); 107 e.preventDefault(); 108 } 109 } 110 111 </script> 112 </body> 113 114 </html>
本文結束。
原生javascript自定義input[type=checkbox]效果