（在线等！）document.getElementBy得到你勾选的值,把对应的div做显示或者隐藏（直接上代码加注释谢谢）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（在线等！）document.getElementBy得到你勾选的值,把对应的div做显示或者隐藏（直接上代码加注释谢谢）相关的知识，希望对你有一定的参考价值。
<td class="long">
变更次数
<input type="checkbox" name="incheck" checked="checked" value="updateNo" />
总工时
<input type="checkbox" name="incheck" value="totalHour" />
平均处理时长
<input type="checkbox" name="incheck" value="avgDealTime" />
</td>
<div id="container1"></div>(对应变更次数)
<div id="container01"></div>（对应总工时)
<div id="container02"></div>（对应处理时长）
<script>
//o代表点击的多选框, id代表目标container的id, o.checked表示点击的多选框是否打钩
//设置目标div的display, o.checked等于true时为显示(block), o.checked等于false时隐藏(none)
function tabDiv(o, id)
document.getElementById("container"+id).style.display = o.checked ? "block" : "none";
</script>
//多选框加上onclick函数
<td class="long">
变更次数
<input type="checkbox" name="incheck" checked="checked" value="updateNo"
onclick="tabDiv(this, '1');" />
总工时
<input type="checkbox" name="incheck" value="totalHour" onclick="tabDiv(this,
'01');"/>
平均处理时长
<input type="checkbox" name="incheck" value="avgDealTime" onclick="tabDiv(this,
'02');"/>
</td>
<div id="container1"></div>(对应变更次数)
<div id="container01"></div>（对应总工时)
<div id="container02"></div>（对应处理时长）追问
谢谢，比楼上的好，但是我不加click事件（因为需求问题），根据选择的值 显示哪个div 怎么写？
需求是如果我选择的checkbox换了，我还要点一次分析才出来隐藏的div，而上一个div就隐藏了
你是说点击完多选框之后，再点击分析按钮才实现div的隐藏和显示吗？
追问恩，比如说我分析变更次数 ，我不可能 也不能把总工时的值也查出来，所以有了click事件也没值，而且也不能有click事件。
追答
变更次数
总工时
平均处理时长
(对应变更次数)
（对应总工时)
（对应处理时长）
//按checkbox的顺序定义div的id
var items = ['1','01','02'];
function tabDiv()
//遍历name为incheck的控件
var t = document.getElementsByName('incheck');
for(var i=0;i
<head>
<script>
function aa(obj)
alert(obj.checked);
//选中
if(obj.checked)
var val = obj.value;
if(val == "updateNo")
var div = document.getElementById("container1");
div.innerHTML = val ;
if(val == "totalHour")
var div = document.getElementById("container01");
div.innerHTML = val ;
if(val == "avgDealTime")
var div = document.getElementById("container02");
div.innerHTML = val ;
</script>
</head>
<body>
<table>
<td class="long">
变更次数
<input type="checkbox" name="incheck" onclick="aa(this)" checked="checked" value="updateNo" />
总工时
<input type="checkbox" name="incheck" onclick="aa(this)" value="totalHour" />
平均处理时长
<input type="checkbox" name="incheck" onclick="aa(this)" value="avgDealTime" />
</td>
<div id="container1"></div>(对应变更次数)
<div id="container01"></div>（对应总工时)
<div id="container02"></div>（对应处理时长）
</table>
</body>
</html>
// 写了一个点击事件，一上来就选中了一个，你可以把它写死
追问先谢谢你
如果我不加click事件（因为我点哪一个之后会有个分析按钮），根据选择的值显示div 怎么写？
根据你的代码，我的另外两个div未能全部隐藏
你是说当取消选中的话 div上的value也不要显示了吗
追问不是，需求是如果我选择的checkbox换了，我还要点一次分析(得到勾选的值,把对应的div做显示或者隐藏)，而上一个div就隐藏了
不是通过点checkbox 事件显示的
// 你说的分析我总感觉跟onclick是相同的事件问你，你自己处理一下吧，就是选中和不选中怎么来响应时间,这个可以实现你说的隐藏
<html>
<head>
<script>
function aa(obj)
var val = obj.value;
//选中
if(obj.checked)
if(val == "updateNo")
var div = document.getElementById("container1");
div.innerHTML = val ;
if(val == "totalHour")
var div = document.getElementById("container01");
div.innerHTML = val ;
if(val == "avgDealTime")
var div = document.getElementById("container02");
div.innerHTML = val ;
// 取消选中时，div里面的内容消失，
//其实你可以把div的id和value的值在命名上有点关系，就不用一个一个判断了
else
if(val == "updateNo")
var div = document.getElementById("container1");
div.innerHTML = "" ;
if(val == "totalHour")
var div = document.getElementById("container01");
div.innerHTML = "" ;
if(val == "avgDealTime")
var div = document.getElementById("container02");
div.innerHTML = "" ;
</script>
</head>
</html>
以上是关于（在线等！）document.getElementBy得到你勾选的值,把对应的div做显示或者隐藏（直接上代码加注释谢谢）的主要内容，如果未能解决你的问题，请参考以下文章