复选框如何调用js来控制页面某一部分的显示或隐藏？

麻烦帮忙写一下示例代码!
就是当复选框选中的时候，页面这个<div id="a" style="display:none"></div>被显示

举报该文章

相关建议推荐于2018-03-01

给每个复选框添加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>

温馨提示：内容为网友见解，仅供参考

当前网址：https://66.aolonic.com/aa/p9vvd9s2x.html

其他看法

第1个回答推荐于2016-03-08

利用事件。

将checkbox的onclick事件，绑定上一个回调函数。也就是当点击checkbox时，执行这个函数。

在回调函数中，判断checkbox的值，即判断是否选择，如果选择，一种情况，否则另一种情况。

特定的div的显示和隐藏，就可以通过你在第2步得到的数据来控制，可以在css中预设两个class,一个是显示，一个是不显示，在第2步里控制所需要被控制的div的classname就行了。

第2个回答推荐于2016-01-06

<html>
<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>本回答被提问者采纳

相似回答

大家正在搜