显示或隐藏 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 成为复选框的兄弟；） Here's an example

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

Answer 2

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

使用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 4

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

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>

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

Answer 5

请检查下面的代码以在单击复选框时切换（显示/隐藏）潜水。

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

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