在html中，复选框的问题。有多个复选框，ID一样，用一个按钮来控制复选框是否全部被选中，那个JS怎么写？
<scriptlanguage="javascript">functioncon(){document.getElementById("conid").checked="...
<script language="javascript">
function con(){
document.getElementById("conid").checked="checked";
}
</script>
<input type="checkbox" name="conid[]" id="conid" value="<?=$row["con_id"]?>" />
<input type="checkbox" name="conid[]" id="conid" value="<?=$row["con_id"]?>" />
<a href="#" onclick="con()">全部选中</a> 展开
function con(){
document.getElementById("conid").checked="checked";
}
</script>
<input type="checkbox" name="conid[]" id="conid" value="<?=$row["con_id"]?>" />
<input type="checkbox" name="conid[]" id="conid" value="<?=$row["con_id"]?>" />
<a href="#" onclick="con()">全部选中</a> 展开
2个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#op{margin:5px 0;width:55px;height:20px;background:#f1f1f1;border:1px solid #999; font-size:12px; position:absolute;top:5px;}
img{ cursor:pointer;}
#op ul{margin:0; padding:0;width:100%;border:1px solid #00f;cursor:pointer; background:#fff;list-style:none;display:none;}
#op ul li{;text-align:center; line-height:20px;}
.oinput{width:20px;}
</style>
<script type="text/javascript">
window.onload=function ()
{
var oIn1=document.getElementById('in1');
var oImg=document.getElementsByTagName('img')[0];
var oUl=document.getElementsByTagName('ul')[0];
var oli=document.getElementsByTagName('li');
var oInput=document.getElementsByTagName('input');
var i=0
oImg.onclick=function()
{
if(oUl.style.display=='block')
{
oUl.style.display='none'
}
else
{
oUl.style.display='block'
}
};
oli[0].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=true;
};
};
oIn1.onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=oIn1.checked;
};
};
oli[1].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=false;
};
};
oli[2].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=!oInput[i].checked;
};
};
};
</script>
</head>
<body>
<br />
<div id="op">
<input id="in1" type="checkbox" /><img src="images/004.jpg" style=" margin:8px;float:right;">
<ul>
<li>全选</li>
<li>全不选</li>
<li>反选</li>
</ul>
</div>
<hr>
<div class="oinput">
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#op{margin:5px 0;width:55px;height:20px;background:#f1f1f1;border:1px solid #999; font-size:12px; position:absolute;top:5px;}
img{ cursor:pointer;}
#op ul{margin:0; padding:0;width:100%;border:1px solid #00f;cursor:pointer; background:#fff;list-style:none;display:none;}
#op ul li{;text-align:center; line-height:20px;}
.oinput{width:20px;}
</style>
<script type="text/javascript">
window.onload=function ()
{
var oIn1=document.getElementById('in1');
var oImg=document.getElementsByTagName('img')[0];
var oUl=document.getElementsByTagName('ul')[0];
var oli=document.getElementsByTagName('li');
var oInput=document.getElementsByTagName('input');
var i=0
oImg.onclick=function()
{
if(oUl.style.display=='block')
{
oUl.style.display='none'
}
else
{
oUl.style.display='block'
}
};
oli[0].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=true;
};
};
oIn1.onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=oIn1.checked;
};
};
oli[1].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=false;
};
};
oli[2].onclick=function()
{
for(i=1;i<oInput.length;i++)
{
oInput[i].checked=!oInput[i].checked;
};
};
};
</script>
</head>
<body>
<br />
<div id="op">
<input id="in1" type="checkbox" /><img src="images/004.jpg" style=" margin:8px;float:right;">
<ul>
<li>全选</li>
<li>全不选</li>
<li>反选</li>
</ul>
</div>
<hr>
<div class="oinput">
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
