다중 레벨 체크박스를 시뮬레이션하는 jquery 코드

오늘 jquery의 위력을 다시 한번 경험했습니다. 다단계 체크박스 효과를 만들어봤는데 코드가 총 20줄밖에 안됐네요.

js를 사용해 다시 해보고 싶었지만, 몇 가지 메서드를 작성하고 나니 더 이상 작성할 수 없게 되었습니다. 고려해야 할 호환성 문제도 많았고, 코드의 양도 급증했습니다.

주로 jquery에서 이 효과의 구현을 공유합니다. 코드 블록은 두 부분으로 나뉩니다.

첫 번째는 모두 선택 효과입니다. 즉, 선택한 확인란을 클릭하면 해당 하위 항목이 그에 따라 선택되거나 선택 취소됩니다. 이 분 참 쉽네요 코드는 다음과 같습니다

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

evtEle.parent ().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle은 클릭된 체크박스입니다

두 번째는 현재 확인란의 상위 상자가 현재 상자의 모든 형제가 선택되었는지 여부에 따라 상위 상자가 선택되었는지 여부를 결정한 다음 계속해서 상위 상자를 조회한다는 것입니다. 상위 상자 등
모두 선택되면 여기 구현에서는 상위를 사용하여 모든 상위 상자를 가져오고 각각을 결합하여 각 작업이 완료됩니다.

모두 선택하지 않으면 상위 상자의 선택이 차례로 취소됩니다. 코드는 다음과 같습니다.

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

if (evtEle .is("입력: 확인됨")) {
evtEle.parents(".checks").each(function () {
!$(this).children("p").children("input :checkbox").filter (function () {
return !this.checked;
})[0] && $(this).prev().children("input:checkbox").attr(" 확인됨", "확인됨" );
});
} else {
evtEle.parents(".checks").prev().children("input:checkbox").attr("checked ", false);
}

코드 다운로드