jQuery(제이쿼리) 셀렉터 예제모음

체크박스(checkbox) 선택 반전하기

전체 폼요소
URL : https://ktsmemo.cafe24.com/s/jQuerySelector/666
등록일 : ,

최대한 간단한 소스로 체크박스 선택 반전

- 버튼 클릭시 체크 박스 선택 반전.
- prop 메서드에 함수 적용하여 사용.

체크1 체크2 체크3 체크4 체크5 체크6

HTML

<input type="checkbox" name="chk" value="1" />체크1
<input type="checkbox" name="chk" value="2" checked />체크2
<input type="checkbox" name="chk" value="3" />체크3
<input type="checkbox" name="chk" value="4" checked />체크4
<input type="checkbox" name="chk" value="5" />체크5
<input type="checkbox" name="chk" value="6" checked />체크6
<br><br>

<button type="button" onclick="gogogo()">선택 반전</button>

자바스크립트

function gogogo(){

	// prop 메서드에 함수를 적용하여 사용
	// 함수 두번째 인자값은 체크 여부인 true, false
	// 이 두번째 값을 반전 시켜서 return 함
	// return 값에 따라 체크박스 선택 결정
	$('[name=chk]').prop('checked', function(i, val){ return !val });

}

단 한줄 이면 충분 해용 ^^*

관련 링크

jQuery API 문서 .prop()