选中复选框时显示/隐藏div [英] Show/Hide div when checkbox selected

查看:159
本文介绍了选中复选框时显示/隐藏div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要在用户选择复选框时显示其他内容。我有以下代码:

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>

真的会感谢一些帮助,良好的HTML5,CSS3的知识,但非常基本的JavaScript / jQuery。 p>

Would really appreciate some help, good knowledge of HTML5, CSS3 but very basic JavaScript/jQuery.

推荐答案

你缺少jQuery,你必须包含它。

You are missing jQuery in your head you must include it.

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

您的代码工作 DEMO

Your code works DEMO

根据新信息更新 $ b

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

DEMO

您也可以使用.fadeToggle()

You can also just use .fadeToggle()

$(document).ready(function () {
    $('#checkbox1').change(function () {
      $('#autoUpdate').fadeToggle();
    });
});

这篇关于选中复选框时显示/隐藏div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆