jquery 확인란 모두 선택/취소 example_jquery

기능:

a: 체크박스 클릭 시 하위 체크박스를 모두 선택한 후 클릭하면 모든 체크박스의 선택 상태가 취소됩니다

b: 하위 확인란 하나를 선택하면 상위 확인란이 선택되고 모든 하위 확인란이 선택 해제되면 상위 확인란이 선택 해제됩니다

코드 복사 코드는 다음과 같습니다.

/**
* 모든 기능 선택
* @param mainId 메인 체크박스 ID
* @param klass 하위 체크박스 클래스
*/
function selectAll(mainId,klass){
$("." klass).each(function(){
if($("#" mainId).attr("checked")== "checked "){
$(this).attr("checked", "checked");
}
else{
$(this).removeAttr("checked");
}
});
}

위에서는 모든 하위 체크박스의 선택과 취소를 모두 구현합니다. 데이터 구현은 컨트롤러에서 체크박스 배열을 받기만 하면 됩니다.

코드 복사 코드는 다음과 같습니다.

/**
* 하위 체크박스 중 하나에 상위 체크박스가 선택되어 있으면 선택하세요.
모든 하위 체크박스를 선택 해제하고 상위 체크박스를 선택 해제하세요.
* @param father 상위 체크박스의 ID
* @param son 하위 체크박스 클래스
*/
function checkSonCheckBox(father,son){
$("." son).click(function(){
if($(this).attr("checked")== "checked"){
$(this).addClass("checked");
}else{
$(this).removeClass("checked");
}
if($("." son).hasClass("checked")){
$("#" father).attr("checked","checked");
// console.log("적어도 하나의 하위 확인란이 있습니다. selected!" );
}else{
$("#" father).removeAttr("checked");
// console.log("모든 하위 확인란이 선택 취소되었습니다!");
}
});
};

위 구현: 하위 확인란 하나를 선택하면 상위 확인란이 선택되고 모든 하위 확인란이 선택 해제되면 상위 확인란이 선택 해제됩니다