选中复选框时隐藏 div 元素答案

【问题标题】：Hiding a div element when checkbox is checked选中复选框时隐藏 div 元素
【发布时间】：2017-01-12 15:39:03
【问题描述】：

如果未选中复选框，我会尝试在我的 Register.cshtml 视图中隐藏特定的 div。

脚本代码：

<script type="text/javascript">
$(document).ready(function () {
    $(function () {
        $('#profesor').change(function () {
            value = $(this).val();
            if (value == 0) {
                $('#smjer').hide();
            }
            else {
                $('#smjer').show();
            }
        });
    });
});

复选框“教授”：

 <div class="form-group">
    <label asp-for="profesor" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input type="checkbox" asp-for="profesor" class="form-control" id="profesor">
        <span asp-validation-for="profesor" class="text-danger"></span>
    </div>
</div>

Div 元素“smjer”：

<div class="form-group" id="smjer">
    <label asp-for="smjer" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <select asp-for="smjer" class="form-control">
            <option>Računarstvo</option>
            <option>Menadžment turizma i sporta</option>
            <option>Održivi razvoj</option>
        </select>
            <span asp-validation-for="smjer" class="text-danger"></span>

当我运行项目时，“Smjer”的输入字段仍然存在，选中或取消选中“教授”复选框不会隐藏或显示 div 元素。

【问题讨论】：

为更好地理解问题而编辑
您可以使用if ($(this).is(':checked')) 选择器而不是与值进行比较

标签： javascript jquery model-view-controller

【解决方案1】：

只要您的复选框具有名为value 且值为“0”的属性，您的代码就应该可以工作。但它只会隐藏/显示一次。当您再次单击复选框时，它不会隐藏/显示，因为您的复选框值仍然相同。

如果您只是想根据选中/未选中状态更改可见性，请使用 jQuery toggle 方法。

$(function () {

    $('#profesor').change(function () {
         $('#smjer').toggle();
    });

});

【讨论】：

【解决方案2】：

$(document).ready(function () {
        $('#profesor').change(function () {
            value = $(this).val();
            if (!this.checked) {
                $('#smjer').hide();
            }
            else {
                $('#smjer').show();
            }
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
    <label asp-for="profesor" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input type="checkbox" asp-for="profesor" class="form-control" id="profesor">
        <span asp-validation-for="profesor" class="text-danger"></span>
    </div>
</div>

<div class="form-group" id="smjer">
    <label asp-for="smjer" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <select asp-for="smjer" class="form-control">
            <option>Računarstvo</option>
            <option>Menadžment turizma i sporta</option>
            <option>Održivi razvoj</option>
        </select>
            <span asp-validation-for="smjer" class="text-danger"></span>

【讨论】：