javascript - 如何根据复选框切换点击打开div？

Question

我创建了一个引导开关，并且在开关底部有一个 div，因此当开关打开时我希望 div 显示，当开关关闭时我希望 div 隐藏。我找到了一些仅显示复选框的解决方案。

我该怎么做？

例如，如果选中开关复选框，那么我需要显示 div 的内容，否则隐藏 div。

.tags-list-group {
    margin-bottom: 50px;
}

.tags-list-group .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    float: right;
}

.tags-list-group .switch input {
    display: none;
}

.tags-list-group .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.tags-list-group .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.tags-list-group input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.tags-list-group .slider.round {
    border-radius: 34px;
}

.tags-list-group .slider.round:before {
    border-radius: 50%;
}

.tags-list-group input.success:checked + .slider {
    background-color: #8bc34a;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>

<div class="tags-list-group">
    <div class="tags-group-card">
        <!-- Default panel contents -->
        <ul class="list-group list-group-flush">
            <li class="list-group-item custom-list-group-item">
                User Defined
                <label class="switch ">
                    <input type="checkbox" class="success">
                    <span class="slider round"></span>
                </label>
            </li>
        </ul>
    </div>
    <div class="list-group-item show-content">
        <p>Content 1(hide div)</p>
    </div>

</div>

Answer 1

这对于 jquery 来说非常简单。查看以下示例

$(document).ready(() => {
    $("#content").hide();

    $("#chkbox").click((e) => {
        if ($("#chkbox").is(":checked")) {
            $("#content").show();
        } else {
            $("#content").hide();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="" id="chkbox" />
<div id="content">
    <p>Hidden Content</p>
</div>