모두 선택 단추

전체 선택 단추의 실현

전체 선택 버튼은 가장 기초적인dom수에 대한 조작의 예이다. 평상시 웹 사이트를 유람하는 과정에서 이런 예가 적지 않다. 예를 들어 타오바오 징동상점의 쇼핑 카트 안에서 우리가 전체 선택 버튼을 누르면 쇼핑 카트 안의 모든 아이템이 선택된다.전체 선택 버튼을 다시 클릭하면 카트 내의 모든 품목이 선택 취소됩니다.모두 선택 상태에서 라디오 버튼 중 하나가 취소되면 모두 선택 취소됩니다.모두 선택하지 않은 상태에서 모든 라디오 버튼이 선택된 경우 모두 선택 버튼이 선택됩니다.
아이디어:
조작할 수 있는 대상을 찾고, 찾은 대상에 조작을 추가하는 것으로 요약할 수 있다.DOM 트리에서 두 가지 버튼을 찾아 해당 응답 함수를 바인딩합니다.
구체적인 실현:
이 기능에서는 전체 선택 버튼, 라디오 버튼 또는 라디오 버튼 전체 선택 버튼 변경 작업을 수행할 수 있습니다. 따라서 첫 번째 단계에서는 두 가지 버튼을 찾습니다.

//  
var chbAll = document.querySelector('table>thead th:first-child>input')
//  
var chbs = document.querySelectorAll('table>tbody td:first-child>input'); 

전체 선택 버튼을 클릭할 경우 전체 선택 버튼에 클릭 이벤트를 바인딩합니다.

//  chbAll 
chbAll.onclick = function(){
	//  chbs
	for(var i = 0; i < chbs.length; i++){	
		//  chb chbAll 
		chbs[i].checked = this.checked;
	}
}

라디오 버튼을 클릭할 경우 모든 라디오 버튼에 클릭 이벤트를 바인딩합니다.

//  chbs
for(var i = 0; i < chbs.length; i++){
	//  chbs 
	chbs[i].onclick = function(){
		//  checken false
		if(!this.checked){
			//  chbAll false
			chbAll.checked = false;
		}else{
			//  
			var chkds = document.querySelectorAll('table>tbody td:first-child>input:not(:checked)');
			//  0 
			if(chkds.length === 0){
				chbAll.checked = true;
			}else{//  
				chbAll.checked = false;
			}
		}
	}
}

다음은 html 페이지 코드입니다.

<table border="1px" width="500px" cellspacing="0">
	<thead>
		<tr>
			<th><input type="checkbox"/> </th>
			<th> ID</th>
			<th> </th>
			<th> </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="adminID"/></td>
			<td>1</td>
			<td>Tester</td>
			<td></td>
		</tr>
		<tr>
			<td><input type="checkbox" name="adminID"/></td>
			<td>2</td>
			<td>Manager</td>
			<td></td>
		</tr>
		<tr>
			<td><input type="checkbox" name="adminID"/></td>
			<td>3</td>
			<td>Analyst</td>
			<td></td>
		</tr>
		<tr>
			<td><input type="checkbox" name="adminID"/></td>
			<td>4</td>
			<td>Admin</td>
			<td></td>
		</tr>
	</tbody>
</table>