728x90
반응형
안녕하세요, 이번 포스팅은 jQuery를 이용하여 체크박스 전체선택, 전체해제 기능을 추가해보려고 합니다.
오늘 핵심 구문은 다음과 같습니다.
<script>
$(document).ready(function(){
$("#헤더에 있는 체크박스 아이디").click(function() {
if($("#헤더에 있는 체크박스 아이디").is(":checked")) $("input[name=체크박스 이름]").prop("checked", true);
else $("input[name=체크박스 이름]").prop("checked", false);
});
});
</script>
지난 포스팅에서 jQuery CDN을 추가했었습니다.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
오늘 만들 화면은 아래와 같습니다.
1. 테이블을 먼저 만듭니다.
<body>
<table style="border: 1px solid black;">
<thead>
<tr>
<th><input type="checkbox" id="chkAll" name="chkAll"/></th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="chk"></td>
<td>홍길동</td>
<td>27</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"></td>
<td>김길동</td>
<td>26</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"></td>
<td>장길동</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
2. 그 다음, jQuery를 사용할 수 있도록 $(document).ready(funciton(){}); 문을 작성해줍니다.
<script>
$(document).ready(function() { });
</script>
3. 체크박스 클릭 이벤트를 넣어줍니다.
<script>
$(document).ready(function() {
$("#chkAll").click(function() {
if($("#chkAll").is(":checked")) $("input[name=chk]").prop("checked", true);
else $("input[name=chk]").prop("checked", false);
});
});
</script>
4. 체크박스 이벤트가 잘 작동하는지 확인합니다.
| 이름 | 나이 | |
|---|---|---|
| 홍길동 | 27 | |
| 김길동 | 26 | |
| 장길동 | 25 |
지금까지 포스팅을 읽어주셔서 감사합니다.
728x90
반응형
'javascript, jQuery > jQuery' 카테고리의 다른 글
| [jQuery] 체크박스 전체 선택, 전체 해제, 모든 항목 체크 시 전체 선택 체크박스 선택되게 하기 (6) | 2021.05.27 |
|---|---|
| [jQuery] 제이쿼리로 id값 받기 (0) | 2021.04.15 |
| [jQuery] 제이쿼리를 이용하여 선택한 체크박스 항목 가져오기(인덱스 가져오기, 전체선택 해제) (1) | 2020.11.20 |
| jQuery CDN 붙여넣기 (1) | 2020.11.16 |
댓글