javascript - show or hide div, dependet on a checkbox - Stack Overflow

admin管理员组

文章数量:1421500

I have a checkbox and under the checkbox a div area, where i wanna show a dropdown and another checkboxes. This area i wanna just show when the first checkbox is checked.

I already try it with style.display and it works half. I can display the second area when i check the checkbox, but if i uncheck it doesn´t hide again. Same if I try with jquery (posted both)

//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=".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>

I have a checkbox and under the checkbox a div area, where i wanna show a dropdown and another checkboxes. This area i wanna just show when the first checkbox is checked.

I already try it with style.display and it works half. I can display the second area when i check the checkbox, but if i uncheck it doesn´t hide again. Same if I try with jquery (posted both)

//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./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>

I hope someone have an idea for me

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 4, 2019 at 17:19 Gregor Albert 84111 gold badge1111 silver badges2424 bronze badges asked Feb 4, 2019 at 11:31 JosefJosef 2111 silver badge66 bronze badges 4

• 1 As you've tagged this jquery: $("#doing").show(tpe.checked); – fdomn-m Commented Feb 4, 2019 at 11:32
• How are you triggering functpe()? Have you checked the value of tpe.checked (console/alert/debug-step)? Is it always true? – fdomn-m Commented Feb 4, 2019 at 11:34
• I found your code in the edit - just needed first line to be indented with 4 or more spaces. – fdomn-m Commented Feb 4, 2019 at 11:35
• Possible duplicate of jQuery Show-Hide DIV based on Checkbox Value and Jquery Show / Hide based on checkbox status and How to show/hide an element on checkbox checked/unchecked states using jQuery? and Show/Hide with Checkbox using jQuery and show/hide object based on checkbox selection – adiga Commented Feb 4, 2019 at 12:00

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You can do it with only CSS. You just need to tweak a little bit order to make #doing a sibling of checkbox ;) Here's an example

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

try like this with JQuery Toggle

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

<script src="https://cdnjs.cloudflare./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>

Use the toggle method provided by the jQuery API

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

<script src="https://cdnjs.cloudflare./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>

I have just tried your code and it seems to work fine:

https://jsfiddle/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>

Please confirm if you are getting any errors in the console?

please check below code to toggle(show/hide) dive when click on check box.

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

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

本文标签： javascriptshow or hide divdependet on a checkboxStack Overflow