확인란을 선택하면 다른 옵션 표시

Question

확인란을 선택하면 "티셔츠"크기를 표시하는 데 문제가 있습니다. jQuery를 사용하고 있지만 코드가 제대로 작동하지 않습니다.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#tshirt').attr('checked'); 
     $("#sizes").show(); 
    }); 
); 
</script> 


<b>Cool T-Shirt</b>: <input type="checkbox" id="tshirt" name="tshirt"> <span class="price">$15</span>    
<span id="sizes"><bSize</b>: <input type="checkbox" name="size" value="S"> <span class="price">Small</span></span> 

현재 ID "크기"디스플레이로 설정 : CSS를 통해 없음 다음은 지금까지 내 코드입니다. 내가 도움이 필요한 것은 사용자가 ID "tshirt"라는 체크 박스를 선택할 때 ID "크기"가 표시되기를 원할 때입니다. 어떤 도움이라도 대단히 감사합니다! 확인란을 선택하면

$(document).ready(function() { 
    $('input#tshirt').click(function() { 
     if($(this).is(':checked')) { 
      $("#sizes").show(); 
     } else { 
      $("#sizes").hide(); 
     } 
    }); 
}); 

이

이 #sizes을 보여줍니다, 그리고 그것을 해제 확인 때 다시 숨 깁니다 :

Answer 1

는이처럼 click() 핸들러 내부에 코드를 삽입해야합니다.

<input>에 checked="checked"을 추가하여 페이지로드시 확인하도록하면 현재 JS에 $('#tshirt').attr('checked');이있는 이유가 명확하지 않습니다.

Answer 2

.toggle()이 처리해야합니다. 이 같은 것 ..

$('#tshirt').click(function() { 
$('#sizes').toggle('slow', function() { 

'느림'으로 '빠른'및 다른 매개 변수로 바꿀 수 있습니다.

Answer 3

당신은 같은 것을 할 수 있어야한다 :

$(document).ready(function() { 
    $("#tshirt").change(function() { 
     if($(this).is(":checked")) { 
      $("#sizes").show(); 
     } else { 
      $("#sizes").hide();    
     } 
    }); 
}); 

그럼 그냥 CSS와 기본적으로 숨겨져 있는지 확인하십시오

#sizes { 
    display: none; 
}