Question

如果未选中复选框，我正在尝试隐藏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();
            }
        });
    });
});

Checkbox'profesor'：

 <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'的输入字段仍然存在，选中或取消选中'profesor'复选框不会隐藏或显示div元素。

Answer 1

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

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

$(function () {

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

});

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

选中复选框时隐藏div元素

2 个答案: