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.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>
I hope someone have an idea for me
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;
}
Use the toggle
method provided by the jQuery API
$('#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>
try like this with 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>
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()
});
});
I have just tried your code and it seems to work fine:
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>
Please confirm if you are getting any errors in the console?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.