아래와 같이 체크박스가 1번 값을 갖고 있는 그룹과 2번 값을 갖고 있는 그룹이 있을 경우
1번값의 부모를 체크할 경우 자식이 모두 체크되길 바랄 경우가 존재한다.
<input type="checkbox" class="Booseo" GROUP="Y" value="A1">부모체크박스
<input type="checkbox" class="Booseo A1" GROUP="N" value="1">자식체크박스
<input type="checkbox" class="Booseo A1" GROUP="N" value="2">자식체크박스
<input type="checkbox" class="Booseo" GROUP="Y" value="A2">부모체크박스
<input type="checkbox" class="Booseo A2" GROUP="N" value="3">자식체크박스
<input type="checkbox" class="Booseo A2" GROUP="N" value="4">자식체크박스
이럴 땐 부모의 값을 자식 체크박스의 클래스로 부여해주고 부모를 체크했을 때 해당 값을 갖고와 동일한 클래스를 동적으로 확인하여 체크 / 언체크 해주면 된다.
$(".Booseo").click(function() {
if ($(this).attr("GROUP") == "Y") {
var Booseo = "";
Booseo = $(this).val(); // 부모의 값을 획득 후
if ($(this).prop("checked")) {
$("." + Booseo).prop("checked", true); // 클래스로 해당 값을 연결하여 체크
} else {
$("." + Booseo).prop("checked", false);
}
}
})
