[英]jQuery hide div when checkbox checked, show on unchecked
I am trying to hide div when user clicks on checkbox, and show it when user unchecks that checkbox. 我试图在用户点击复选框时隐藏div,并在用户取消选中该复选框时显示该div。 HTML: HTML:
<div id="autoUpdate" class="autoUpdate">
content
</div>
jQuery: jQuery的:
<script>
$('#checkbox1').change(function(){
if (this.checked) {
$('#autoUpdate').fadeIn('slow');
}
else {
$('#autoUpdate').fadeOut('slow');
}
});
</script>
I am having a hard time to get this working. 我很难让这个工作。
Make sure to use the ready
event. 确保使用ready
事件。
Code: 码:
$(document).ready(function(){
$('#checkbox1').change(function(){
if(this.checked)
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
HTML HTML
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<div id="block">Some text here</div>
css CSS
#block{display:none;background:#eef;padding:10px;text-align:center;}
javascript / jquery javascript / jquery
$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000); //time for show
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.