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

Question

我有一个复选框和复选框下一个div区域，在这里我想告诉一个下拉列表和其他复选框。当第一个复选框被选中这个区域，我只是想告诉。

我已经用的style.display尝试它和它的作品的一半。我可以显示在第二区域，当我选中该复选框，但如果我取消它doesn't再次隐藏。如果同我尝试使用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

尝试这样使用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 2

你可以只用CSS做。你只需要调整有点为了使#doing复选框的兄弟姐妹;）Here's an example

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

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当点击复选框。

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

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