2013-10-18 4 views
3

사용자가 확인란을 선택할 때 추가 내용을 표시해야합니다.확인란을 선택한 경우 div 표시/숨기기

<!DOCTYPE html> 
<html> 
<head> 
<title>Checkbox</title> 
<script type="text/javascript"> 


$(document).ready(function(){ 
$('#checkbox1').change(function(){ 
if(this.checked) 
$('#autoUpdate').fadeIn('slow'); 
else 
$('#autoUpdate').fadeOut('slow'); 

}); 
}); 

</script> 
</head> 
<body> 
Add another director <input type="checkbox" id="checkbox1"/> 
<div id="autoUpdate" class="autoUpdate"> 
content 
</div> 
</body> 
</html> 

정말 도움, HTML5, CSS3 잘 알고 있지만 아주 기본적인 자바 스크립트/jQuery를 주셔서 감사합니다겠습니까 : 나는 다음과 같은 코드가 있습니다. 머리에 첫

+3

해당 페이지에 jQuery 라이브러리를 포함하고 있습니까 도움이됩니다 아래로 코드를 대체? 예제 코드에서'과 같은 것을 볼 수 없습니다. – andyb

+1

그리고 정확히 당신의 문제는 무엇입니까? 라이브러리가 포함 된 – webduvet

+0

은 단순히 작동하지 않습니까? 확인란을 선택하면 내용이 숨겨지지 않습니다. – user2890036

답변

12

를 볼 수 있습니다.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

코드는 새로운 정보에 따라 DEMO

업데이트를 작동

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
     if (!this.checked) 
     //^
      $('#autoUpdate').fadeIn('slow'); 
     else 
      $('#autoUpdate').fadeOut('slow'); 
    }); 
}); 

DEMO

당신은 또한 단지 .fadeToggle()

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
     $('#autoUpdate').fadeToggle(); 
    }); 
}); 
을 사용할 수 있습니다 16,
+0

답변을 주셔서 감사합니다. - 이제는 제가 처음에 숨겨지기를 바랄뿐입니다. 아이디어는 어떻게됩니까? 다시 한 번 감사드립니다. – user2890036

+0

당신은 css를 사용할 수 있습니다.'#autoUpdate {display : none}'@ user2890036이 피들 체크 http://jsfiddle.net/Alfie/3WEVr/8/ – Anton

+1

고마워요! 모두 필요한대로 작동합니다. – user2890036

3

당신이 그것을 포함해야

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#checkbox1').change(function(){ 
    if($(this).is(":checked")) 
    $('#autoUpdate').fadeIn('slow'); 
    else 
    $('#autoUpdate').fadeOut('slow'); 

    }); 
    }); 
</script> 

jquery 당신은 당신의 머리에 jQuery를 누락 demo

참조 :checkedis()

0

Plese은 당신이

<!DOCTYPE html> 
<html> 
<head> 
<title>Checkbox</title> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 


$(document).ready(function(){ 
$('#checkbox1').change(function(){ 
if(this.is(":checked") == true) 
$('#autoUpdate').fadeIn('slow'); 
else 
$('#autoUpdate').fadeOut('slow'); 

}); 
}); 

</script> 
</head> 
<body> 
    Add another director <input type="checkbox" id="checkbox1"/> 
<div id="autoUpdate" class="autoUpdate"> 
content 
</div> 
</body> 
</html> 
+0

이것을 jQuery $()로 감쌀 필요가 있습니다. $ (this) .is (': checked') – Anton

관련 문제