我有一个复选框,在复选框下方有一个 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>
我希望有人能给我一个主意
最佳答案
您可以只使用 CSS 来完成。您只需要稍微调整一下顺序,使 #doing
成为复选框的兄弟 ;)
Here's an example
.doing {
display: none;
}
input[type=checkbox]:checked ~ .doing {
display: block;
}
关于javascript - 显示或隐藏 div,取决于复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54515220/