js/ 속성 조작 메서드(prop) 실습

2022-01-21 JavaScript 수업 실습 도중 한가지 의문에서 시작 된 나 혼자하는 실습...
- '전체체크' 체크시 아래 체크박스들 중 하나라도 풀리면,
'전체체크'의 체크표시도 풀리게 하고 싶음
- 아래 체크박스들을 다 체크하면 '전체체크'의 체크표시도 체크되게 하고싶음

 

 

<table border="1">
	<thead>
		<tr>
			<th>
				<label><input type="checkbox" id="allCheck"> 전체선택</label>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<label><input type="checkbox" class="checks"> 내용1</label>
			</td>
		</tr>
		<tr>
			<td>
				<label><input type="checkbox" class="checks"> 내용2</label>
			</td>
		</tr>
		<tr>
			<td>
				<label><input type="checkbox" class="checks"> 내용3</label>
			</td>
		</tr>
		<tr>
			<td>
				<label><input type="checkbox" class="checks"> 내용4</label>
			</td>
		</tr>
		<tr>
			<td>
				<label><input type="checkbox" class="checks"> 내용5</label>
			</td>
		</tr>
		<tr>
			<td>
				<label><input type="checkbox" class="checks"> 내용6</label>
			</td>
		</tr>
		<tr>
			<td>
				<label><input type="checkbox" class="checks"> 내용7</label>
			</td>
		</tr>
		<tr>
			<td>
				<label><input type="checkbox" class="checks"> 내용8</label>
			</td>
		</tr>
	</tbody>
</table>

 

첫번째 풀이

$(function() {

	var $allCheck = $('#allCheck');

	$allCheck.click(function() {

		if ($allCheck.prop('checked') == true) {
			$('.checks').prop('checked', true);
			console.log($allCheck.prop('checked'));
			cnt = $('tbody tr').length;
		} else {
			$('.checks').prop('checked', false);
			cnt = 0;
		}

		console.log(cnt, '전체선택 누를 때');

	});

	$('#checksReversal').click(function() {
		$('.checks').each(function() {
			$(this).prop('checked', !$(this).prop('checked')); // !연산자

		});
		cnt = $('tbody tr').length - cnt;
		if ($allCheck.prop('checked') == true) {
			$allCheck.prop('checked', false);

		} else {
			if (cnt == $('tbody tr').length)
				$allCheck.prop('checked', true);
		}
		console.log(cnt, '반전 버튼 눌렀을때');
	});

	$('#checksDel').click(function() {
		$('.checks').each(function() {
			if ($(this).prop('checked') == true) {
				$(this).parents('tr').remove();
				cnt = 0;
			}
		});
		$allCheck.prop('checked', false);
	});
	
	var cnt = 0;
	$('.checks').click(function() {
		$(this).each(function() {
			if ($(this).prop('checked') == true) {
				cnt++;
			} else {
				cnt--;
			}
			console.log(cnt, '증가값');

			if ($allCheck.prop('checked') == true) {
				$allCheck.prop('checked', false);
			} else {
				if (cnt == $('tbody tr').length) {
					$allCheck.prop('checked', true);
				}
			}
		});

	});

});

>> 오 했다 하면 이렇게 하니깐 안되는데^^ 하는 상황이 계속계속 발생함... 어떻게 하지 고민하다가 행이 줄어들고 늘어나는경우(원래 문제의 행의 갯수는 5개)가 있으니 이 행의 갯수를 이용해서 카운트 수라는 변수를 만들어 checks 체크박스를 눌렀을 때의 이벤트를 추가해줌 문제는 ... 이렇게 하니 다른 이벤트들(=3개)에도 cnt의 값들을 초기화해줘야하는 아주 멍청하고 번거운 작업이... 근데 일단 성공한 뒤 선생님께 질문을 드렸다...

 

 

선생님 피드백

var len = $('.checks').length;
var checkLen = $('.checks:checked').length;

>> 이렇게 할 필요가 전혀없다 라고 말씀하시고 내 코드를 보시기 시작하셔서 옆에서 안절부절거리며 왜 변수를 만들고, 왜 이벤트마다 그 변수를 초기화 했는지 설명드렸는데 (동적바인딩 방식을 써야하냐는 멍청발언까지 해주기 ㅎ) 행의 갯수를 이용해서 조건문을 썼다는 말을 들으시곤 위의 두개의 변수 선언 및 초기화 식을 써주셨다... 내가 너무 충격받아서 제가 만든 cnt는 지워야 하나요?(=아니라고 말해주세요)라고 또 멍청 질문하니깐...ㅎ

아무튼 오늘 실습은 선생님 풀이와, 피드백으로 내 구구절절 코드 준clean 코드로 만들어보기

 

 

 

두번째 코드

$(function() {			
	var
	$allCheck = $('#allCheck'),
	$checksDel = $('#checksDel'),
	$checksReversal = $('#checksReversal');

	$allCheck.click(function() {
		$('.checks').prop('checked', $(this).prop('checked'));
	});

	$checksReversal.click(function() {
		$('.checks').each(function() {
			$(this).prop('checked', !$(this).prop('checked'));
		});
	});

	$checksDel.click(function() {
		$('.checks:checked').each(function() {
			$(this).parents('tr').remove();
		});
	});
	
	$('.checks').click(function() {
		var len = $('.checks').length;
		var checkLen = $('.checks:checked').length;
		
		if(len != checkLen)
			$allCheck.prop('checked', false);
		else
			$allCheck.prop('checked', true);
	});

});

>> ㅋㅋ... ㅠㅠ ㅠㅠ 바보..? 바다의 보물이라는 뜼