复选框如何调用js来控制页面某一部分的显示或隐藏?
发布网友
发布时间：2022-04-20 10:27
共3个回答
热心网友
时间：2022-04-20 11:56
给每个复选框添加click事件或者change事件，例如
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style>
.div{
width:200px;
height:200px;
border:2px solid red;}
</style>
<script>
$(function(){
$("input").bind("click",function(){
if(this.checked){
$("#"+$(this).attr("traget")).hide();
}else{
$("#"+$(this).attr("traget")).show();
}
})
});
</script>
<body>
<input type="checkbox" id="id1" traget="div1">
<label for="id1">div1</label>
<input type="checkbox" id="id2" traget="div2">
<label for="id2">div2</label>
<input type="checkbox" id="id3" traget="div3">
<label for="id3">div3</label>
<br/>
<br>
<div class="div" id="div1">div1</div>
<div class="div" id="div2">div2</div>
<div class="div" id="div3">div3</div>
</body>
</html>
热心网友
时间：2022-04-20 13:14
利用事件。
将checkbox的onclick事件，绑定上一个回调函数。也就是当点击checkbox时，执行这个函数。
在回调函数中，判断checkbox的值，即判断是否选择，如果选择，一种情况，否则另一种情况。
特定的div的显示和隐藏，就可以通过你在第2步得到的数据来控制，可以在css中预设两个class,一个是显示，一个是不显示，在第2步里控制所需要被控制的div的classname就行了。
热心网友
时间：2022-04-20 14:49
<head><title></title>
<META content = "text/html; charset = gb2312" http-equiv = Content-Type>
<META content = "MSHTML 5.00.2919.6307" name = GENERATOR>
<script type="text/javascript">
window.onload=function(){setInterval("show()",1000)}
function show(){
var ifcheck=document.getElementById("ck");
var showdiv=document.getElementById("dd");
if(ifcheck.checked)
{
showdiv.style.display="none";
}
else
{
showdiv.style.display="block";
}
}
</script>
</head>
<body>
<div>
<input type="checkbox" id="ck"/>显示/隐藏
</div>
<div id="dd" style="border:1px solid black;width:300px;height:300px;background-color:gray;">
这是通过checkbox控制其显示/隐藏的div
</div>
</body>
</html>
