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

체크박스(checkbox)를 전체 선택·해제 하는 체크박스

전체 폼요소
등록일 :

전체 체크박스를 컨트롤 하는 체크박스

- 클릭시 대상이 되는 체크박스를 전체 선택·해제 함
- 예제는 table 안의 내용을 대상으로 했습니다.

제목 왼쪽의 체크박스를 클릭해 보세요.
제목 등록일
제목입니다. 18.11.06
제목이네요. 18.11.07
제목이군요. 18.11.07
제목이었어. 18.11.07


제목 등록일
제목이군요. 18.11.07
제목이었어. 18.11.07

HTML

<table>
	<tr>
		<th><input type="checkbox" onclick="gogogo(this)" /></th>
		<th>제목</th>
		<th>등록일</th>
	</tr>
	<tr>
		<td><input type="checkbox" name="chk" value="1" /></td>
		<td>제목입니다.</td>
		<td>18.11.06</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="chk" value="2" /></td>
		<td>제목이네요.</td>
		<td>18.11.07</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="chk" value="3" /></td>
		<td>제목이군요.</td>
		<td>18.11.07</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="chk" value="3" /></td>
		<td>제목이었어.</td>
		<td>18.11.07</td>
	</tr>
</table>

<br><br>

<table>
	<tr>
		<th><input type="checkbox" onclick="gogogo(this)" /></th>
		<th>제목</th>
		<th>등록일</th>
	</tr>
	<tr>
		<td><input type="checkbox" name="chk" value="3" /></td>
		<td>제목이군요.</td>
		<td>18.11.07</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="chk" value="3" /></td>
		<td>제목이었어.</td>
		<td>18.11.07</td>
	</tr>
</table>

자바스크립트

function gogogo(o){

	// 클릭한 체크박스의 table 에서 (바로위 부모요소를 대상)
	// 이름이 chk 인것을 찾고
	// 현재 요소의 체크 상태를 찾은 대상에 적용
	$(o).closest('table').find('[name=chk]').prop('checked', o.checked);

}