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

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

전체 폼요소
등록일 :

이름으로 체크 박스 전체 선택하기

- 버튼 클릭시 체크박스 모두 선택.
- prop 메서드 사용.

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

HTML

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

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

자바스크립트

function gogogo(){

	// 체크박스의 이름과 prop 메서드를 사용하여 전체 선택
	$('[name=chk]').prop('checked', true);

}

요소와 타입으로 체크 박스 전체 선택하기

- 버튼 클릭시 체크박스 모두 선택.
- 특정 요소 안의 모든 체크박스를 대상으로 해보기.
- prop 메서드 사용.

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

HTML

<div id="wrap">
	<input type="checkbox" name="chk" value="1" />체크1
	<input type="checkbox" name="chk" value="2" />체크2
	<input type="checkbox" name="chk" value="3" />체크3
	<input type="checkbox" name="chk" value="4" />체크4
	<input type="checkbox" name="chk" value="5" />체크5
</div>
<br>
<button type="button" onclick="gogogo()">전체 선택</button>

자바스크립트

function gogogo(){

	// 체크박스 부모요소 id 와 "타입" 으로 전체선택
	$('#wrap [type=checkbox]').prop('checked', true);

}

PHP의 "[]" 배열형 이름으로 체크 박스 전체 선택하기

- 버튼 클릭시 체크박스 모두 선택.
- prop 메서드 사용.

체크1 체크2 체크3

HTML

<input type="checkbox" name="chk[]" value="1" />체크1
<input type="checkbox" name="chk[]" value="2" />체크2
<input type="checkbox" name="chk[]" value="3" />체크3
<br><br>

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

자바스크립트

function gogogo(){

	// 체크박스의 이름과 prop 메서드를 사용하여 전체 선택
	$('[name="chk[]"]').prop('checked', true);

}

참고 : attr() 과 prop() 에 관한 이야기

1.6 버전 이전에는 attr() 메서드로 체크 여부를 컨트롤 할 수 있었으나
1.6 버전 부터 prop() 메서드로 변경되었습니다.

attr() 은 임의의 값을 가지는 대상과 관련된 메서드이고
prop() 은 존재 여부만 있는 대상과 관련된 메서드 입니다.
확실하게 구분을 하게 된 것이죠.
checked, selected 같은 것이 그 예입니다.

그래서 제이쿼리를 새로운 버전으로 적용했을때
기존 코드에서 에러가 나는 문제가 발생했었죠.
이제는 prop() 입니다 !!