一個簡單的帶複選框的樹形圖

<body>
		<ul>
			<li class="li" >
				<label><input type="checkbox" checked="true" class="check-father" /><span id="">
						adadadadsa
					</span></label>
				<ul class="child">
					<li>
						<label><input type="checkbox" checked="true"  /><span id="">
								adadadadsa
							</span></label>
					</li>
					<li>
						<label><input type="checkbox" checked="true" /><span id="">
								adadadadsa
							</span></label>
					</li>
				</ul>
			</li>
			<li class="li" >
				<label><input type="checkbox" checked="true" class="check-father" /><span id="">
						adadadadsa
					</span></label>
				<ul class="child">
					<li>
						<label><input type="checkbox" checked="true"  /><span id="">
								adadadadsa
							</span></label>
					</li>
					<li>
						<label><input type="checkbox" checked="true" /><span id="">
								adadadadsa
							</span></label>
					</li>
				</ul>
			</li>
			<li class="li" >
				<label><input type="checkbox" checked="true" class="check-father" /><span id="">
						adadadadsa
					</span></label>
				<ul class="child">
					<li>
						<label><input type="checkbox" checked="true"  /><span id="">
								adadadadsa
							</span></label>
					</li>
					<li>
						<label><input type="checkbox" checked="true" /><span id="">
								adadadadsa
							</span></label>
					</li>
				</ul>
			</li>
			</ul>
	</body>

Ok,body裏面的代碼差不多就這種結構,沒什麼異議。

<style>
			input{
				position: relative;
				z-index: 2;
			}
			input[type="checkbox"]::before{
					content: " " ;
				    position: absolute;
				    top: 0;
				    left: 0;
				    width: 16px;
				    height: 16px;
				    line-height: 16px;
				    text-align: center;
				    font-size: 16px;
				    background-color: #fff;
				    border-radius: 2px;
				    border: 1px solid #d9d9d9;
			}
			input[type="checkbox"]:checked::before{
				content: "\2714" ;
				color: #fff;
				background-color: #03a9f4;
			}
			.check-father:checked::before{
				content: "\2714" !important;
				color: #fff;
				background-color: #03a9f4;
			}
			.check-other:checked::before{
				content: "\2501" !important;
				color: #fff;
				background-color: #03a9f4;
			}
			
			
			
			ul{
				list-style-type: none;
			}
			.child{
				padding-left:20px ;
			}
		</style>

css代碼的話,我們使用的是自定義的僞類元素,爲了使的複選框更好看。原生的checkBox着實不好看。

<script>
		let fatherList=document.querySelectorAll('.li>label>input');
		fatherList.forEach(father=>{
			let domList=father.parentNode.parentNode.querySelector("ul").querySelectorAll('input');
			father.addEventListener('change',function(e){
				console.log(this.checked)
				console.log(domList)
				let _this=this;
				if(this.checked){
					this.classList.replace('check-other','check-father')
				}
					domList.forEach(dom =>{
						dom.checked= _this.checked;
					})
			})
			domList.forEach(dom=>{
				dom.addEventListener('change',function(){
					let allCheck=[].slice.call(domList).every(item => item.checked);
					let allUnCheck=!( [].slice.call(domList).some(item => item.checked) );
					if(allCheck){
						father.checked=true;
						father.classList.replace('check-other','check-father')
					}else if(allUnCheck){
						father.checked=false;
					}else{
						father.checked=true;
						father.classList.replace('check-father','check-other')
					}
					console.log('allUnCheck',allUnCheck)
				})
			})
		})
		
		
	</script>

JavaScript代碼相對比較簡單。主要是父元素的三種狀態,全選,部分選和全不選。由子元素和自己的選擇變化。主要使用兩個高階函數,every和some。在處理這種問題是這兩個函數非常好用。具體的效果如下;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章