2013-10-03 5 views
1

폼을 쓰고 있습니다. 체크 박스가 있고 폼을 표시하거나 숨기는 스크립트를 작성했습니다.이 중 하나를 선택하면 다른 모든 체크 상자를 숨 깁니다.
내가 입력 체크 박스를 숨기려면이 때까지이 문제가 발생했는데 아래 코드는 체크 박스 (두 번째 체크 상자) 만 표시합니다. 왜, 두 확인란을 동시에 숨길 수 있습니까?fadeIn fadeOut을 사용하여 jquery로 체크 박스를 숨기고

   <div class="field check check-entity"> 
        <label for="entity_type">For what kind of entity are you requesting sponsorship?<span class="form_required">*</span></label><br><br> 
        <input type="checkbox" name="entity_type" value="entity_project" class="project"/><label for="entity_project" class="lalbe_project">Project</label> 
        <input type="checkbox" name="entity_type" value="entity_individual" class="individual"/><label for="entity_individual"class="label_individual">Individual</label> 
        <input type="checkbox" name="entity_type" value="entity_organization" class="organization"/><label for="entity_organization" class="label_organization">Organisation</label> 
       </div> 
+0

포스트는 HTML도 그래서 우리는 당신을 도울 수 있습니다. – Sergio

+0

여기 가서 .. thnx! –

답변

2

요소

$('input.individual:checkbox, input.organization:checkbox') 
//      ^see here 
2

이 당신이 달성하고 싶은 효과의 여러 그룹을 선택하려면 선택 문자열에 ,를 사용

$('input:checkbox.individual' && 'input:checkbox.organization').stop(true,true).fadeIn("normal") 

이 내 HTML입니까?

http://jsfiddle.net/z37br/

HTML :

<div class="field check check-entity"> 
    <label for="entity_type">For what kind of entity are you requesting sponsorship? 
     <span class="form_required">*</span> 
    </label> 
    <br><br> 

    <input type="checkbox" name="entity_type" value="entity_project" data-type="project"/> 
    <label for="entity_project" class="lalbe_project">Project</label> 

    <input type="checkbox" name="entity_type" value="entity_individual" data-type="individual"/> 
    <label for="entity_individual"class="label_individual">Individual</label> 


    <input type="checkbox" name="entity_type" value="entity_organization" data-type="organization"/> 
    <label for="entity_organization" class="label_organization">Organisation</label> 
</div> 

JS :

$('input').change(function() { 
    if ($(this).prop('checked')) { 
     var clickedCheckboxType = $(this).attr('data-type'); 

     $('input').each(function() { 
      if (clickedCheckboxType != $(this).attr('data-type')) { 
       $(this).fadeOut('fast'); 
       $(this).next().fadeOut('fast'); 
      } 
     }); 
    } 
    else { 
     $('input').fadeIn('fast'); 
     $('input').next().fadeIn('fast'); 
    } 
}); 
+0

체크 박스 유형을 저장하는 데 사용한 속성을 변경했습니다. 클래스 이름을 사용했지만 혼란 스러울 수 있습니다. yuor 자신의 'data-'속성을 만들어 대신 사용할 수 있습니다. 기능을 변경하지는 않지만 조금 더 읽기 쉽도록 만듭니다. –