상위 체크 박스 클릭시 하위 체크 박스 표시

잠재 고객 그룹 아래에 체크 박스가 숨겨져있는 잠재 고객 그룹이 있습니다. 이제 잠재 고객 그룹 이름을 클릭하여 숨겨진 체크 박스를 표시하고 싶습니다.상위 체크 박스 클릭시 하위 체크 박스 표시

여기 사용하여 코드 메신저의 더 볼 수 있습니다 : 다음 jQuery 코드를 사용하여

<div class='audience-group'> 
    <input type='checkbox' class='audience-group-checkbox' value='9' /> 
    <div class='audience-group-name'> 
     JGG Enterprises 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='7' /> 
    <div class='audience-name'> 
     Mucho, George 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='9' /> 
    <div class='audience-name'> 
     Bo, Jen 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='10' /> 
    <div class='audience-name'> 
     Gin, Junto 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='12' /> 
    <div class='audience-name'> 
     Molina, Greg 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='36' /> 
    <div class='audience-name'> 
     Berkely, Dada 
    </div> 
</div> 
<div class='audience-group'> 
    <input type='checkbox' class='audience-group-checkbox' value='8' /> 
    <div class='audience-group-name'> 
     GBA Inc. 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='1' /> 
    <div class='audience-name'> 
     Kapate, Jones 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='2' /> 
    <div class='audience-name'> 
     Bingo, Gringo 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='4' /> 
    <div class='audience-name'> 
     Doe, John 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='8' /> 
    <div class='audience-name'> 
     Merio, Horhe 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='35' /> 
    <div class='audience-name'> 
     Dalisay, JM 
    </div> 
</div>

메신저 :

$ (문서)

http://jsfiddle.net/CnmEA/ 내가 이러한 샘플 html 코드를 가지고있다. 준비 (함수() {

$('.audience-group-name').each(function(){ 

    $(this).click(function(){ 

     $(this).find('.audience').show(); 
    }); 
});

});

나는 어떤 도움을 주셔서 감사합니다. jQuery에 다소 익숙합니다!

출처

2011-12-07 Mico

여기에 동작하는 예제입니다

$('.audience-group-name').click(function() { 
     $(this).parent().nextUntil('.audience-group').show(); 
});

당신의 JS 주요 문제는 $(this).find('.audience').show()했다. jQuery find() 메서드는 메서드를 호출하는 jQuery 개체의 자손을 찾습니다. 이 경우 해당 객체는 $(this)이며 이는 .audience-group-name 클래스의 요소를 나타냅니다. 그러나 표시하려는 요소는 해당 요소의 하위 항목이 아닙니다. 하나의 레벨 (.parent())까지 올라간 다음, 다음 요소를 도달 할 때까지 다음 요소를 모두 선택해야합니다. .audience-group.

또한 코드에서 .each() 메서드를 제거한 것을 알 수 있습니다. click 이벤트를 $('.audience-group-name')에 바인딩하면 해당 클래스의 모든 요소에 바인딩됩니다. 해당 요소 중 하나를 클릭하면 $(this)이 올바른 컨텍스트를 제공하므로 올바른 요소를 찾을 수 있습니다. 클릭 한 실제 요소를 제공하므로 DOM 통과 메서드 .parent().nextUntil(...)은 올바른 요소를 찾습니다.

출처

2011-12-07 14:39:04 maxedison

방금 .show()를 .toggle()로 변경했습니다. 그게 바로 제가 찾고 있던 것입니다. 큰 설명에 대한 감사합니다 @ 맥슨! 나는 새로운 것을 배웠다. :) – Mico

니스. 나는'nextUntil()'에 대해 몰랐다. – ScottS

find() 함수는 하위 항목을 선택 항목에서 찾습니다. 부모의 형제를 찾고 있어야합니다. like so

일반 디자인 노트 : 패딩/여백과 함께 왼쪽 오프셋을 에뮬레이트하여 트리 구조를 만들 때 고전적인 HTML 실수가 있습니다. 올바른 방법은.audience-grouplike so 안에 .audience을 입력 한 다음 관리가 훨씬 쉬워집니다. http://jsfiddle.net/CnmEA/5/

그리고 수정 된 JS :

출처

2011-12-07 14:38:07

감사합니다. @ liho1eye! :) – Mico

상위 체크 박스 클릭시 하위 체크 박스 표시

답변

관련 문제