显示或隐藏div，取决于复选框

Question

我有一个复选框，在该复选框下有一个div区域，我想在其中显示一个下拉列表和另一个复选框。 我只想在选中第一个复选框时显示此区域。

我已经用style.display尝试过了，它可以工作一半。 当我选中复选框时，我可以显示第二个区域，但是如果我取消选中，它不会再次隐藏。 如果我尝试使用jQuery，则相同（均发布）

 //function F2 function functpe() { var tpe = document.getElementById("tpe"); if (tpe.checked == true) { document.getElementById("doing").style.display = "block"; } else { document.getElementById("doing").style.display = "none"; } } function functpe() { var tpe = $("#doing"); if (tpe.checked == true) { $("#doing").css({ "display": "block" }); } else { $("#doing").css({ "display": "block" }); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-check form-check-inline" style="font-size:20px"> <input class="form-check-input big-checkbox" type="checkbox" id="tpe" value="tpe" onchange="functpe()"> <label class="form-check-label" for="tpe">tpe</label> </div> <div id="doing" style="display:none"> <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="tpe" style="width: 170px;"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-check form-check-inline" style="font-size:20px"> <input class="form-check-input big-checkbox" type="checkbox" id="n1" value="n1"> <label class="form-check-label" for="n1">n1</label> </div> <div class="form-check form-check-inline" style="font-size:20px"> <input class="form-check-input big-checkbox" type="checkbox" id="n2" value="n2" checked> <label class="form-check-label" for="n2">n2</label> </div> <div class="form-check form-check-inline" style="font-size:20px"> <input class="form-check-input big-checkbox" type="checkbox" id="n3" value="n3" checked> <label class="form-check-label" for="n3">n3</label> </div> </div> 

我希望有人对我有个主意

Answer 1

您只能使用CSS做到这一点。 您只需要稍微调整一下顺序即可使#doing一个同级复选框;） 这是一个示例

.doing {
    display: none;
}
input[type=checkbox]:checked ~ .doing {
    display: block;
}

Answer 2

使用jQuery API提供的toggle方法

 $('#hide').on('click', function(e) { $('#post').toggle(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="hide">Hide</label> <input id="hide" type="checkbox" checked/> <p id="post">Now you see me</p> 

Answer 3

尝试使用JQuery Toggle

 $('.initialOne').change(function() { $('#doing').slideToggle(); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-check form-check-inline" style="font-size:20px"> <input class="form-check-input big-checkbox initialOne" type="checkbox" id="tpe" value="tpe"> <label class="form-check-label" for="tpe">tpe</label> </div> <div id="doing" style="display:none"> <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="tpe" style="width: 170px;"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-check form-check-inline" style="font-size:20px"> <input class="form-check-input big-checkbox" type="checkbox" id="n1" value="n1"> <label class="form-check-label" for="n1">n1</label> </div> <div class="form-check form-check-inline" style="font-size:20px"> <input class="form-check-input big-checkbox" type="checkbox" id="n2" value="n2" checked> <label class="form-check-label" for="n2">n2</label> </div> <div class="form-check form-check-inline" style="font-size:20px"> <input class="form-check-input big-checkbox" type="checkbox" id="n3" value="n3" checked> <label class="form-check-label" for="n3">n3</label> </div> </div> 

Answer 4

请选中以下代码以切换（显示/隐藏）潜水。

<div id="autoUpdate" class="autoUpdate">
    content
</div> 

<script>
    $(document).ready(function(){
        $('#checkbox1').change(function(){
            $('#autoUpdate').toggle()
         });
    });    

Answer 5

我刚刚尝试了您的代码，它似乎正常工作：

https://jsfiddle.net/h8nfx4g2/

<div class="form-check form-check-inline" style="font-size:20px">
  <input class="form-check-input big-checkbox" type="checkbox" id="tpe" value="tpe" onchange="functpe()">
  <label class="form-check-label" for="tpe">tpe</label>
</div>
<div id="doing" style="display:none">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="tpe" style="width: 170px;">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n1" value="n1">
    <label class="form-check-label" for="n1">n1</label>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n2" value="n2" checked>
    <label class="form-check-label" for="n2">n2</label>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n3" value="n3" checked>
    <label class="form-check-label" for="n3">n3</label>
  </div>
</div>

<script>
  function functpe() {

    var tpe = document.getElementById("tpe");


    if (tpe.checked == true) {
      document.getElementById("doing").style.display = "block";
    } else {
      document.getElementById("doing").style.display = "none";
    }
  }

</script>

请确认您在控制台中是否遇到任何错误？