[jQuery] javascript 연계 - 체크박스 (전체선택/해제) 기능
이걸 왜 구현했느냐면, jQuery 상에서 다양한 방법을 찾아보았으나, Attr만 가지고 구현할 때의 100%의 동작이 아니고, 버그로 인해 일부 동작하지 않은 것을 확인하였습니다.
그래서 원시적인 방법이지만, Checkbox를 Cnt와 Last 값을 비교하여 Javascript의 원래 동작 기능을 연계하여 전체선택 / 해제 기능을 구현했습니다.
<script>
function toggleChecked() {
var i = 0;
var Last = (($("table[id=test']").find("input[type=checkbox]").length) / 3);
var cnt = 0;
i = 1;
while (i <= Last) {
if (document.getElementById("chk_" + i).checked) {
cnt++;
}
i++;
}
if (cnt == Last) {
i = 1;
while (i <= Last) {
document.getElementById("chk_" + i).checked = false;
i++;
}
} else {
i = 1;
while (i <= Last) {
document.getElementById("chk_" + i).checked = true;
i++;
}
}
}
</script>
빨간 부분이 일부에서 3을 곱해버리는 현상이 생겨서 나눗셈으로 단순하게 처리했는데, 환경에 맞게 계산을 대입하면 될거라고 봅니다.
<tr>
<td><input id="chk_1" type="checkbox"> <td>
</tr>
<tr>
<td><input id="chk_2" type="checkbox"> <td>
</tr>
<tr>
<td><input id="chk_3" type="checkbox"> <td>
</tr>
</table>
'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글
| [jQuery] jQuery CDN(배포) 안내 (0) | 2013.12.09 |
|---|---|
| [jQuery] Treeview Library - 추천 라이브러리 (0) | 2013.12.05 |
| [Javascript] 현재 페이지 Refresh 방법 - (3가지) (0) | 2013.12.01 |
| [jQuery] 하이퍼링크 예제를 통한 {속성 Get, Set에 관한 설명} (0) | 2013.12.01 |
| [Javascript] 비밀번호 - 정규식 표현 (탬플릿) (0) | 2013.11.28 |