[JQuery] 체크 박스 전체 개수와 선택된 개수 / 체크 처리와 체크 해제

 

 

 

 

 

 

제이쿼리를 이용하여
체크박스 전체 개수와 체크된 개수를 구할 수 있습니다.
또한 체크처리 / 해제 할 수 있습니다.

 

 

 

<ul>
    <input type="checkbox" name="checkbox_aaa" id="chk1" value="1" />
    <input type="checkbox" name="checkbox_aaa" id="chk2" value="2" />
    <input type="checkbox" name="checkbox_aaa" id="chk3" value="3" checked />
</ul>

 

 

체크박스의 전체 개수

---

$("input:checkbox[name=체크박스 NAME]").length

의 형태로 체크박스 전체 개수를 구할 수 있습니다.

 

위와 같은 체크박스가 있을 때 다음과 같은 제이쿼리를 사용해 checkbox_aaa 체크박스의 전체 개수를 알 수 있습니다.

$("input:checkbox[name='checkbox_aaa']").length;

 

 

 

체크박스 체크된 개수

---

$("input:checkbox[name=체크박스 NAME]:checked").length

의 형태로 체크된 개수를 구할 수 있습니다.

 

위와 같은 체크박스가 있을 때 다음과 같은 제이쿼리를 사용해 checkbox_aaa 체크박스에서 체크된 개수를 알 수 있습니다.

$("input:checkbox[name='checkbox_aaa']:checked").length;

 

 

 

 

전체 체크박스 체크/ 체크 해제

---

반복문을 통하여 전체 체크박스를 체크 / 체크 해제할 수 있습니다.

 

아래 코드를 통하여 checkbox_aaa라는 이름을 가지고 있는 체크박스에 체크 / 체크 해제 처리할 수 있습니다.

$("input:checkbox[name='checkbox_aaa']").each(function() {
      this.checked = true;		//체크 처리
      //this.checked = false;		//체크 해제 처리
});

 

 

 

cf. 자바스크립트를 통해 체크박스, 셀렉트 박스, 라디오버튼 활성화/비활성화 하기

https://hajoung56.tistory.com/41

[JavaScript]checkbox, select, radio 활성화, 비활성화 / 선택 값 / 선택 변경