JS实现的“多复选框控制多DIV的显隐”要怎样简化JS代码？

代码如下，目前的JS只是实现了第一个复选框的控制，如果要控制5个复选框各自显隐，我用笨办法是把这段JS写5编（ck1，ck2，ck3。。。囧），但这样显然有点太二了，大侠们帮忙看看要用怎样的逻辑来实现多个复选框控制的显隐呢？
注：目前的思路是ck12345各自控制dd的12345。是不是要用到数组咧？求师兄们赐完整代码供师弟研磨研磨。。。

<html><head><style>.aaa{position:fixed; border:1px solid #666; top:120px; left:330px; width:90px; height:auto; overflow:hidden; font:12px/20px 微软雅黑;}div div{width:100px;height:60px;background-color:#CCC; float:left; text-align:center; margin:2px;}</style><script type="text/javascript">window.onload=function(){setInterval("show()",100)}function show(){var x=document.getElementById("ck1");var s=document.getElementById("dd1");if(x.checked) { s.style.display="block"; }else { s.style.display="none"; }}</script></head><body><div> <div id="dd1">淘宝</div> <div id="dd2">新浪</div> <div id="dd3">网易</div> <div id="dd4">天猫</div> <div id="dd5">百度</div></div><div class="aaa"><input type="checkbox" checked="checked" id="ck1" /><label for="ck1">淘宝</label><br /><input type="checkbox" checked="checked" id="ck2" /><label for="ck2">新浪</label><br /><input type="checkbox" checked="checked" id="ck3" /><label for="ck3">网易</label><br /><input type="checkbox" checked="checked" id="ck4" /><label for="ck4">天猫</label><br /><input type="checkbox" checked="checked" id="ck5" /><label for="ck5">百度</label></div></body></html>

举报该文章

相关建议推荐于2016-03-22

<div id="dd1">淘宝</div>
    <div id="dd2">新浪</div>
    <div id="dd3">网易</div>
    <div id="dd4">天猫</div>

</div>
<input type="checkbox"  id="ck1" value="dd1" /><label for="ck1">淘宝</label><br />
<input type="checkbox"  id="ck2" value="dd2" /><label for="ck2">新浪</label><br />
<input type="checkbox"  id="ck3" value="dd3" /><label for="ck3">网易</label><br />
<input type="checkbox"  id="ck4" value="ck4" /><label for="ck4">天猫</label><br />

<script type="text/javascript">
     $(":checkbox").each(function () {
         $(this).click(function () {
             if ($(this).attr("checked") == "checked") {
                 $("#" + $(this).val()).hide();

             } else {
                 $("#" + $(this).val()).show();
             }
         });

     });
      </script>

追问

感谢回答，我试了下，在加载jquery、input加入 checked="checked"的情况下，复选框可以实现对应div的隐藏，但是隐藏后再次点击复选框无法实现重新显示，这个是什么情况？求赐教~

追答

我这可以啊，你只用我的代码试试