1 <html> 2 <head> 3 <title></title> 4 <style> 5 b{ 6 display: block; 7 width: 7px; 8 height: 7px; 9 position: absolute; 10 right: 6px; 11 top: 7px; 12 background: url(20130606B.png) no-repeat -37px -62px; 13 cursor: pointer; 14 } 15 16 label{width: 57px; height: 20px;float:left;margin-top:5px;} 17 18 ul{float:left; height: auto;margin-top: 2px;list-style:none;margin-left: 10px;} 19 ul li{ 20 float: left; 21 position: relative; 22 height: 20px; 23 padding: 0 20px 0 5px; 24 border: 1px solid #E6E6E6; 25 margin-right: 15px; 26 margin-bottom: 2px; 27 line-height: 20px; 28 } 29 30 .item{border-bottom: 1px solid #f9f9f9; clear:both;height:25px;} 31 </style> 32 </head> 33 <body> 34 <div> 35 <input type="text" name="" id="time-s"/> 36 <input type="text" name="" id="time-e"/> 37 <input type="button" value="保存" id="save" onclick="_save_time()"/> 38 </div> 39 <div id="places"> 40 <input type="checkbox" name="chx" value="Sunday"/>香港Sunday 41 <input type="checkbox" name="chx" value="Monday"/>澳门Monday 42 <input type="checkbox" name="chx" value="Tuesday"/>深圳Tuesday 43 <input type="checkbox" name="chx" value="Wednesday"/>台北Wednesday 44 <input type="checkbox" name="chx" value="Thursday"/>乌镇Thursday 45 <input type="checkbox" name="chx" value="Friday"/>丽江Friday 46 <input type="checkbox" name="chx" value="Saturday"/>杭州Saturday 47 </div> 48 49 <div id="allplaces"> 50 <input type="checkbox" id="checkall" name="chx" value="0" onclick="_check_all(this)"/>全选 51 </div> 52 53 <div> 54 55 <div class="item"> 56 <label>星期天</label> 57 <ul id="Sunday"></ul> 58 59 <div class="item"> 60 <label>星期一</label> 61 <ul id="Monday"></ul> 62 </div> 63 64 <div class="item"> 65 <label>星期二</label> 66 <ul id="Tuesday"></ul> 67 </div> 68 69 <div class="item"> 70 <label>星期三</label> 71 <ul id="Wednesday"></ul> 72 </div> 73 74 <div class="item"> 75 <label>星期四</label> 76 <ul id="Thursday"></ul> 77 </div> 78 79 <div class="item"> 80 <label>星期五</label> 81 <ul id="Friday"></ul> 82 </div> 83 84 <div class="item"> 85 <label>星期六</label> 86 <ul id="Saturday"></ul> 87 </div> 88 89 </div> 90 </div> 91 <div style="clear:both"></div> 92 <hr/> 93 <div id="time_area"></div> 94 95 96 </body> 97 <script> 98 //点击“全选”， 所有地方都选上 99 function _check_all(obj) 100 { 101 console.log(obj.value) 102 var nodes = document.getElementById("places").childNodes; 103 if(obj.checked) 104 { 105 for (var i=0; i < nodes.length; i++) 106 { 107 if(nodes[i].type == "checkbox") 108 { 109 nodes[i].checked = true; 110 } 111 } 112 } 113 else 114 { 115 for (var i=0; i < nodes.length; i++) 116 { 117 if(nodes[i].type == "checkbox") 118 { 119 nodes[i].checked = false; 120 } 121 } 122 } 123 } 124 125 window.onload = function(){ 126 127 //删除时间段 128 var oUls = document.getElementsByTagName("ul"); 129 for(var i=0; i <oUls.length; i++){ 130 oUls[i].addEventListener("click", function(event){ 131 var evt = event|| window.event; 132 var obj = evt.target || evt.srcElement; 133 var nodeName = obj.nodeName.toLowerCase(); 134 if(nodeName == "b"){ 135 obj.parentNode.parentNode.removeChild(obj.parentNode); 136 } 137 }); 138 } 139 140 //星期一 到 星期天 input checkbox click事件绑定, 与 “全选” checkbox之间的关系判断 141 var oChilds = document.getElementById("places").childNodes; 142 for (var i=0; i < oChilds.length; i++) 143 { 144 if(oChilds[i].type == "checkbox") 145 { 146 oChilds[i].addEventListener("click", function(event){ 147 var nodes = oChilds; 148 if(this.checked) 149 { 150 for (var i=0; i < nodes.length; i++) 151 { 152 if((nodes[i].type == "checkbox") && !nodes[i].checked) 153 { 154 document.getElementById("checkall").checked = false; 155 return; 156 } 157 } 158 document.getElementById("checkall").checked = true; 159 } 160 else 161 { 162 document.getElementById("checkall").checked = false; 163 } 164 }); 165 } 166 } 167 } 168 169 //保存时间 170 171 Array.prototype.contains = function(obj){ 172 var i = this.length; 173 while (i--) 174 { 175 if (this[i] === obj) 176 { 177 return true; 178 } 179 } 180 return false; 181 } 182 183 function _save_time(time_range){ 184 var oChilds = document.getElementById("places").childNodes; 185 for(var i=0; i < oChilds.length; i++){ 186 if(oChilds[i].type == "checkbox" && oChilds[i].checked) 187 { 188 var oLi = document.createElement("li"); 189 var oSpan = document.createElement("span"); 190 var oB = document.createElement("b"); 191 192 //拿到上一次保存的数据，如果存在则不添加，否则就添加 193 var oUl = document.getElementById(oChilds[i].value); 194 var nextVal = "19:30:00-21:00:00"; 195 var oLiPrevVal = []; 196 197 var oLiPrevNodes = oUl.childNodes; 198 console.log(oLiPrevNodes); 199 for(var j=0; j<oLiPrevNodes.length; j++){ 200 oLiPrevVal.push(oLiPrevNodes[j].childNodes[0].innerHTML); 201 console.log(oLiPrevVal); 202 } 203 204 if(!oLiPrevVal.contains(nextVal)) 205 { 206 oSpan.innerHTML = nextVal; 207 oLi.appendChild(oSpan); 208 oLi.appendChild(oB); 209 oUl.appendChild(oLi); 210 } 211 212 } 213 } 214 } 215 </script> 216 </html>