Javascript & JQuery & CSS

기존 Javascript 를 사용할때와 다르게 복잡한 기능을 Jquery 에서는 너무 쉽게 구현되는 경우가 많습니다.

checkbox 를 이용해서 전체선택, 전체해제 기능은 상당히 자주 사용하는 기능입니다.

jquery 에서는 어떻게 처리가능한지 예제를 보겠습니다.
 

	<input type="checkbox" name="all" class="check-all"> <label>Check ALL</label>

	<input type="checkbox" name="cb1" class="ab"> <label>Checkbox 1</label>
	<input type="checkbox" name="cb2" class="ab"> <label>Checkbox 2</label>
	<input type="checkbox" name="cb3" class="ab"> <label>Checkbox 3</label>
	<input type="checkbox" name="cb4" class="ab"> <label>Checkbox 4</label>

	// 아래는 Jquery 부분입니다.

	$( '.check-all' ).click( function() {
		$('.ab').prop('checked', this.checked);
	});

class 가 check-all 인 객체를 클릭하면 이벤트가 발생합니다.

class 가 ab인 모든 객체의 checked 값을 check-all 의 checked 값으로 변경하게 됩니다. (this.checked)

속성을 변경할 수 있는  prop() Method 를 이용해서 변경하면 한줄이면 해결이 되네요....