다단 계 콤 보 상자 효 과 를 모 의 하 는 jquery 코드

오늘 은 jquery 의 강력 함 을 다시 한 번 느 꼈 습 니 다.다단 계 체크 상자 의 효 과 를 만 들 었 습 니 다.코드 는 모두 20+줄 이면 over 입 니 다.나 는 또 js 로 하 나 를 만들어 보고 싶 었 다.몇 가지 방법 을 썼 는데 도 쓸 수 없 었 다.호환성 은 많이 고려 해 야 하고 코드 의 양 이 수직 으로 증가 했다.주로 jquery 의 이 효과 의 실현 을 공유 합 니 다.코드 블록 은 두 조각 으로 나 뉜 다.하 나 는 선택 한 효과 이다.선택 한 체크 상 자 를 누 르 면 자손 이 모두 선택 되 거나 선택 되 지 않 는 다 는 것 이다.이 사람 은 아주 잘 합 니 다.코드 는 다음 과 같 습 니 다.
 
evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle
두 번 째 는 현재 체크 상자 의 부모 상자 입 니 다.현재 상자 의 형제 가 모두 선택 되 었 는 지 여부 에 따라 부모 상자 의 선택 여 부 를 결정 하고 부모 상자 의 부모 상자 등 을 계속 보 세 요.모두 선택 되 었 을 때 이 곳 의 구현 은 parents 를 사용 하여 모든 부모 상 자 를 얻 고 모든 작업 을 each 와 결합 하여 완성 합 니 다.전체 선택 이 아 닐 때 부모 상 자 는 순서대로 선택 되 지 않 습 니 다.코드 는 다음 과 같 습 니 다.
 
if (evtEle.is("input:checked")) {
evtEle.parents(".checks").each(function () {
!$(this).children("p").children("input:checkbox").filter(function () {
return !this.checked;
})[0] && $(this).prev().children("input:checkbox").attr("checked", "checked");
});
} else {
evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false);
}
코드 다운로드

좋은 웹페이지 즐겨찾기