[jQuery] javascript 연계 - 체크박스 (전체선택/해제) 기능

[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을 곱해버리는 현상이 생겨서 나눗셈으로 단순하게 처리했는데, 환경에 맞게 계산을 대입하면 될거라고 봅니다.

 

<table id="test"> 

     <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>