2012-12-04 2 views
1

나는 2 개 주 체크 박스 "JA"와 "니"가. 이 확인란 중 하나를 선택하면 하나 이상의 확인란이있는 하위 메뉴가 열립니다. 이 서브 체크 박스는 "ja"와 "nee"이며 maincheckbox에서 선택한 것에 응답합니다. 내가 겪고있는 문제는 사용자가 메인 체크 박스에서 "nee"를 선택한 다음 "ja"로 모든 서브 체크 박스를 변경할 수 있지만 maincheckbox는 "nee"로 유지되지만 "ja"체크 박스로 전환해야한다는 것입니다.제거 확인 다른 상자를 선택하지 않은 경우

질문 만이 개 체크 박스를 만 그들에 체크 속성을 가질 수와 subcheckboxes는 "하위 메뉴"라는 DIV 클래스에 있도록 내가 그것을했습니다.

나는이 문제에 대한 해결책은 "니"클래스 subcheckboxes의 하위 메뉴에서 선택되어 있는지 확인하는 것입니다 어떻게 생각. maincheckbox가 "nee"에 머물러있는 경우 "nee"maincheckbox에서 checked 속성을 제거하고 "ja"체크 박스로 전환하십시오. 그러나 분명히 나는 ​​그것을하는 방법을 알아낼 수 없다.

나는 작은 jsFiddle 프로젝트 보여주는했다 : 나는이 같은 것 생각했다 경우, jQuery 코드

$('.open_sub_ja').click(function() { 
    $(this).parents('.container_vragen').find('.ja').attr('checked', this.checked); 
    $(this).parents('.container_vragen').find('.nee').removeAttr('checked'); 
}); 

$('.open_sub_nee').click(function() { 
    $(this).parents('.container_vragen').find('.ja').removeAttr('checked'); 
    $(this).parents('.container_vragen').find('.nee').attr('checked', this.checked); 
}); 

    $('.ja').click(function() { 
     $(this).parents('.antwoorden').find('.ja').attr('checked', this.checked); 
     $(this).parents('.antwoorden').find('.nee').removeAttr('checked'); 
    }); 

    $('.nee').click(function() { 
     $(this).parents('.antwoorden').find('.ja').removeAttr('checked'); 
     $(this).parents('.antwoorden').find('.nee').attr('checked', this.checked); 
    }); 

http://jsfiddle.net/B2zs5/

<div> 
<p>Heb je DigiD?</p> 
       <div class="antwoorden"> 
        <input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label> 
        <input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
        <div class="extra_info">? 
         <div class="extra_info_popup"> 
          Hidden tekst 
         </div> 
        </div> 
       </div> 
      </div> 

을 그리고 여기

if('.nee'.attr('checked')) { 
    // do nothing 
} 
else { 
    $('.open_sub_nee').removeAttr('checked'); 
    $('.open_sub_ja').attr('checked'); 
} 
+0

와 무슨 일이 일어날 것 아니? –

+0

좋은 점은 사용자와의 상호 작용을 위해 모든 하위 옵션을 예 (아니요 다른 방법으로)에서 no로 변경할 수 있어야합니다. 그러나 나는 그런 일이 일어나지 않을 것입니다. –

답변

3

나는 당신이 main nee> all sub의 ja를 원한다고 추측하고 있습니다.> ja를 main으로 설정하고 그 반대의 경우에는 1 개 또는 그 이상의 하위 항목이없는 경우 주를 변경합니다.

두 번째 비트는 간단하다

$('.nee').click(function() { 
    $(this).parents('.antwoorden').find('.ja').removeAttr('checked'); 
    $(this).parents('.antwoorden').find('.nee').attr('checked', this.checked); 

    $(this).parents('.container_vragen').find('.open_sub_ja').removeAttr('checked'); 
    $(this).parents('.container_vragen').find('.open_sub_nee').attr('checked', this.checked); 
}); 

은 JA에 하위 메뉴에서 http://jsfiddle.net/B2zs5/2/

모든 체크 박스에 내 편집을 저장 한 것으로 보인다 JA의 주요 태어나 셨 변경 : http://jsfiddle.net/B2zs5/5/를 - 나는했습니다 하위 옵션 중 하나를 예를 점검하고, 나머지 경우 사용 Teun의 코드와 Determine if all checkboxes within jQuery object are checked, return as boolean

$('.ja').click(function() { 
    $(this).parents('.antwoorden').find('.ja').attr('checked', this.checked); 
    $(this).parents('.antwoorden').find('.nee').removeAttr('checked'); 

    $group1 = $(this).parents('.submenu').find('.ja'); 
    if($group1.filter(':not(:checked)').length === 0){ 
     //ALL ja checkboxes in submenu checked 
     $(this).parents('.container_vragen').find('.open_sub_ja').attr('checked', this.checked); 
     $(this).parents('.container_vragen').find('.open_sub_nee').removeAttr('checked'); 
    } 
}); 
+0

이상적으로, 스왑은 재사용됨에 따라 별도의 기능을 수행 할 수 있습니다. – Sandra

0

피들을 수정하고 수표를 추가했습니다 .. 이렇게하면 선택을 취소하면 여기에 자신의 링크 뒤에/3을 추가 할 수 있습니다. 나는 그것을 게시하게하지 않을 것입니다 :/ 이게 당신이 찾고 있는게 있나요? 이 방법은 모든 수표를 제거하지만, 내가하는 것보다 더 나은 수업을 알지만 기본은 지금 있습니다.

+0

편집 된 바이올린입니다. : P http://jsfiddle.net/B2zs5/3/ –

관련 문제