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

查看：53 发布时间：2021/12/23 8:18:19 javascript jquery html checkbox show-hide

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

问题描述

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

<头><title>复选框</title><script type="text/javascript">$(document).ready(function(){$('#checkbox1').change(function(){如果(this.checked)$('#autoUpdate').fadeIn('slow');别的$('#autoUpdate').fadeOut('slow');});});<身体>添加另一个导演 <input type="checkbox" id="checkbox1"/><div id="autoUpdate" class="autoUpdate">内容

非常感谢您的帮助，对 HTML5、CSS3 有很好的了解，但非常基本的 JavaScript/jQuery.

解决方案

您的头脑中缺少 jQuery，您必须包含它.

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

您的代码有效DEMO

根据新信息更新

$(document).ready(function () {$('#checkbox1').change(function () {如果(！this.checked)//^$('#autoUpdate').fadeIn('slow');别的$('#autoUpdate').fadeOut('slow');});});

演示

你也可以只使用 .fadeToggle()

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

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.

解决方案

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

<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');
    });
});

DEMO

You can also just use .fadeToggle()

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

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

查看全文

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

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭