根据加载的复选框状态隐藏或显示DIV

Question

这个问题与以下问题有关：

hide或基于复选框状态显示DIV

如何检查复选框是否已在负载上检查。

我正在使用ASP-For加载内容。

Answer 1

要检查是否已经在Load.tra.try上检查了复选框

如果

<input type="checkbox" asp-for="gridCheck1" />
<div id="ShowHideMe">
    <p>some content</p>
</div>

。

$(function () {
      myFunction();
 )};
 $('#gridCheck1').change(function () {
      myFunction();
 });
 function myFunction() {
     const div = document.getElementById('ShowHideMe');
     if ($("#gridCheck1").prop('checked')) {
          div.style.display = "block";
     } else {
          div.style.display = "none";
     }
 }

Answer 2

我如何解决这个问题，希望它能有所帮助：

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

            myFunction();
        });
    });
    $(document).ready(function() {
        myFunction();
    });

    function myFunction() {
        $('#ShowHideMe').toggle($('#gridCheck1').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>