jQuery 选中复选框时显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19447591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide div when checkbox selected
提问by user2890036
I need to make additional content appear when a user selects a checkbox. I have the following code:
当用户选择复选框时，我需要显示其他内容。我有以下代码：
<!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>
Would really appreciate some help, good knowledge of HTML5, CSS3 but very basic JavaScript/jQuery.
非常感谢一些帮助，对 HTML5、CSS3 有很好的了解，但非常基本的 JavaScript/jQuery。
回答by Anton
You are missing jQuery in your head you must include it.
您的脑海中缺少 jQuery，您必须将其包含在内。
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Your code works DEMO
您的代码有效演示
Update according to new info
根据新信息更新
$(document).ready(function () {
$('#checkbox1').change(function () {
if (!this.checked)
// ^
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
You can also just use .fadeToggle()
你也可以只使用 .fadeToggle()
$(document).ready(function () {
$('#checkbox1').change(function () {
$('#autoUpdate').fadeToggle();
});
});
回答by Rituraj ratan
first in head include jquery
首先包含jquery
<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>
see demo
看演示
回答by mmpatel009
Plese replace your code with below it will help you
请用下面的代码替换您的代码，它将帮助您
<!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>
