JS实现的“多复选框控制多DIV的显隐”要怎样简化JS代码？
代码如下，目前的JS只是实现了第一个复选框的控制，如果要控制5个复选框各自显隐，我用笨办法是把这段JS写5编（ck1，ck2，ck3。。。囧），但这样显然有点太二了，大侠...
代码如下，目前的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> 展开
注：目前的思路是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> 展开
1个回答
展开全部
<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的隐藏，但是隐藏后再次点击复选框无法实现重新显示，这个是什么情况？求赐教~
追答
我这可以啊，你只用我的代码试试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
