前端之家

  1. 首页
  2. 问答

根据复选框状态隐藏或显示div

• 问答

如何在带有Razor的ASP.NET Core 2.2中如何基于复选框状态显示或隐藏div元素？

我有这个，但是不起作用：

<script>
$(function() {
    $('#gridCheck1').change(function() {
        $('#ShowHideMe').toggle($(this).is(':checked'));
    });
});
</script>

<div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck1">
            <label class="form-check-label" for="gridCheck1">
                Example checkbox
            </label>
        </div>
    </div>
</div>

<div id="ShowHideMe">
    <p>some content</p>
</div>

这是我在项目文件夹中的库：

根据复选框状态隐藏或显示div

chensong651 回答：根据复选框状态隐藏或显示div

如果您想在不显示div的情况下开始运行，似乎很正常。向其添加style="display:none"。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script>
$(function() {
    $('#gridCheck1').change(function() {
        $('#ShowHideMe').toggle($(this).is(':checked'));
    });
});
</script>

<div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck1">
            <label class="form-check-label" for="gridCheck1">
                Example checkbox
            </label>
        </div>
    </div>
</div>

<div id="ShowHideMe" style="display:none">
    <p>some content</p>
</div>

asp.net-core-2.2checkboxjavascriptrazor-pages
本文链接：https://www.f2er.com/3165473.html

大家都在问