web-dev-qa-db-ja.com

チェックボックスが選択されている場合に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の十分な知識、しかし非常に基本的なJavaScript/jQueryを本当に感謝します。

4
user2890036

コードを以下に置き換えてください。

<!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
mmpatel009