728x90
반응형
안녕하세요, 이번 포스팅은
(1) jQuery를 이용하여 선택한 체크박스 항목을 가져오기,
(2) 전체선택이 아닐 때 헤더에 있는 체크박스 풀기를 추가해보도록 하겠습니다.
오늘 핵심 구문은 다음과 같습니다.
<script>
function putCheckList() {
peopleArr = new Array();
var idxArr = new Array();
$("input[name=chk]:checked").each(function() {
idxArr.push($("input[name=chk]").index(this));
});
for (var i = 0; i < idxArr.length; i++) {
var obj = new Object();
obj.name = $("#tbl_peopleList tbody").children().eq(idxArr[i]).children().eq(1).text();
obj.age = $("#tbl_peopleList tbody").children().eq(idxArr[i]).children().eq(2).text();
peopleArr.push(obj);
}
}
</script>
지난 포스팅에서 jQuery CDN과 테이블 생성, 화면 로드 시 헤더 체크박스 이벤트를 추가했었습니다.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<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>
오늘 만들 화면은 아래와 같습니다.
1. 테이블, 버튼, 텍스트박스를 만듭니다.
<body>
<table id="tbl_peopleList" 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>
<input type="button" id="btn_showChkList" name="btn_showChkList" value="체크리스트 확인" />
<br/>
<textarea id="txt_getChkList" style="width: 250px; height: 100px;"></textarea>
</body>
2. 그 다음, jQuery를 사용할 수 있도록 $(document).ready(funciton(){}); 문과 이벤트 처리문을 작성해줍니다.
<script>
var peopleArr = new Array(); // 체크된 항목을 담기 위한 배열 선언
$(document).ready(function() {
// 체크 박스 클릭 시 전체선택
$("#chkAll").click(function() {
if($("#chkAll").is(":checked")) $("input[name=chk]").prop("checked", true);
else $("input[name=chk]").prop("checked", false);
putCheckList();
});
$("input[name=chk]").change(function() {
// 체크박스 갯수와 체크된 체크박스 갯수 비교 후 불일치시 헤더 체크박스 해제
if($(this).length != $("input[name=chk]:checked").length) $("#chkAll").prop("checked", false);
putCheckList();
});
$("#btn_showChkList").click(function() {
if(peopleArr.length == 0) {
$("#txt_getChkList").val("");
alert("체크된 항목이 없습니다.");
return;
}
var str = "";
for (var i = 0; i < peopleArr.length; i++) {
str += "순번 : " + parseInt(i+1) + ", 이름 : " + peopleArr[i].name + ", 나이 : " + peopleArr[i].age + "\n";
}
$("#txt_getChkList").val(str);
});
});
</script>
3. 이제 체크박스가 변경될 때마다 사람 배열에 값을 넣어줄 함수를 작성합니다.
function putCheckList() {
peopleArr = new Array();
var idxArr = new Array();
$("input[name=chk]:checked").each(function() {
idxArr.push($("input[name=chk]").index(this));
});
for (var i = 0; i < idxArr.length; i++) {
var obj = new Object();
obj.name = $("#tbl_peopleList tbody").children().eq(idxArr[i]).children().eq(1).text();
obj.age = $("#tbl_peopleList tbody").children().eq(idxArr[i]).children().eq(2).text();
peopleArr.push(obj);
}
}
4. 체크박스 이벤트가 잘 작동하는지 확인합니다.
| 이름 | 나이 | |
|---|---|---|
| 홍길동 | 27 | |
| 김길동 | 26 | |
| 장길동 | 25 |
지금까지 포스팅을 읽어주셔서 감사합니다.
728x90
반응형
'javascript, jQuery > jQuery' 카테고리의 다른 글
| [jQuery] 체크박스 전체 선택, 전체 해제, 모든 항목 체크 시 전체 선택 체크박스 선택되게 하기 (6) | 2021.05.27 |
|---|---|
| [jQuery] 제이쿼리로 id값 받기 (0) | 2021.04.15 |
| jQuery를 이용하여 체크박스 전체선택, 전체해제 기능 구현 (0) | 2020.11.17 |
| jQuery CDN 붙여넣기 (1) | 2020.11.16 |
댓글