前段时间做了一个,js控制复选框全选的功能,可是我只能实现单一的功能,不能重复调用,在同事的帮助下,提问网站实现啦。现在想和大家一起分享。
下面是css样式代码:
<style type="text/css" media="all">
body{ width:660px; font-family:""; font-size:12px; margin:0px auto; padding:0px; color:#333}
ul,li,ol,form,textarea,p,dd,dt,dl,td,table,div{ margin:0px; padding:0px; border:none}
li{ list-style:none; vertical-align:bottom}
img{ border:none}
font,input,textarea{ font-size:12px; padding:0px; margin:0px; background:#fff}
a{outline:none;font-family:"\5b8b\4f53",Arial,sans-serif}
a,area{blr:expression_r(this.onFocus=this.blur())}
:focus{-moz-outline-style:none;}
.clear{clear:both; font-size:0px; line-height:0px; height:0px; visibility:hidden}
.left{ float:left}
.right{ float:right}
.block{ display:block}
.none{ display:none}
.hidden{visibility:hidden}
.visible{visibility:visible}
a:link,a:visited{ color:#111; text-decoration:none}
a:hover{ color:#e60011; text-decoration:underline} .listtit{ width:750px; padding:12px 5px 5px 5px; border-bottom:1px solid #ccc}
.listl{ width:30px; padding-top:4px; padding-top:0px\9; text-align:center}
.listr{ width:500px; height:22px; line-height:22px}.listr label{ cursor:pointer; color:#0C4C72}
.checkcon{ width:760px; padding-top:10px}
.checktd{ float:left; padding-left:8px}
.chec01{ width:26px;padding-top:4px; padding-top:0px\9; text-align:center}
.chec02{height:22px; line-height:22px}
</style>
下面是html代码:
<div class="listtit">
<div class="listl left"><input type="checkbox" name="operate" id="operate" onclick="qxcheckb('oper','operate')" /></div>
<div class="listr left"><label for="operate">操作</label></div>
<div class="clear"></div></div>
<div class="checkcon">
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="oper" value="总帐台" /></dd>
<dt class="chec02 left">总帐台</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="oper" value="进口帐台" /></dd>
<dt class="chec02 left">进口帐台</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="oper" value="报关帐台" /></dd>
<dt class="chec02 left">报关帐台</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="oper" value="业务跟踪及费用" /></dd>
<dt class="chec02 left">业务跟踪及费用</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="oper" value="转账状态" /></dd>
<dt class="chec02 left">转账状态</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="oper" value="多次运输" /></dd>
<dt class="chec02 left">多次运输</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="oper" value="客户反馈" /></dd>
<dt class="chec02 left">客户反馈</dt>
</dl>
<div class="clear"></div></div>
<!--陆运-->
<div class="listtit">
<div class="listl left"><input type="checkbox" name="land" id="land" onclick="qxcheckb('ln','land')"/></div>
<div class="listr left"><label for="land">陆运</label></div>
<div class="clear"></div></div>
<div class="checkcon">
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="ln" value="陆运帐台" /></dd>
<dt class="chec02 left">陆运帐台</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="ln" value="换单帐台" /></dd>
<dt class="chec02 left">换单帐台</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="ln" value="集港动态" /></dd>
<dt class="chec02 left">集港动态</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="ln" value="调度表" /></dd>
<dt class="chec02 left">调度表</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="ln" value="报箱号" /></dd>
<dt class="chec02 left">报箱号</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="ln" value="陆运日程" /></dd>
<dt class="chec02 left">陆运日程</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="ln" value="质量跟踪" /></dd>
<dt class="chec02 left">质量跟踪</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="ln" value="司机提成" /></dd>
<dt class="chec02 left">司机提成</dt>
</dl>
<div class="clear"></div></div>
<!--运营-->
<div class="listtit">
<div class="listl left"><input type="checkbox" name="production" id="production" onclick="qxcheckb('prod','production')"/></div>
<div class="listr left"><label for="production">运营</label></div>
<div class="clear"></div></div>
<div class="checkcon">
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="prod" value="自动提醒" /></dd>
<dt class="chec02 left">自动提醒</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="prod" value="车务手续" /></dd>
<dt class="chec02 left">车务手续</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="prod" value="维护保养" /></dd>
<dt class="chec02 left">维护保养</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="prod" value="轮胎管理" /></dd>
<dt class="chec02 left">轮胎管理</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="prod" value="回票油耗" /></dd>
<dt class="chec02 left">回票油耗</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="prod" value="车辆维修" /></dd>
<dt class="chec02 left">车辆维修</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="prod" value="驾驶员管理" /></dd>
<dt class="chec02 left">驾驶员管理</dt>
</dl>
<dl class="checktd">
<dd class="chec01 left"><input type="checkbox" name="prod" value="车辆信息" /></dd>
<dt class="chec02 left">车辆信息</dt>
</dl>
<div class="clear"></div></div>
下面是js代码:
<script language="javascript" type="text/javascript"> function qxcheckb(name,name2){
var checkboxs=document.getElementsByName(name);
var operate=document.getElementByIdx_x(name2);
for(var i=0; i<checkboxs.length; i++){
var e=checkboxs[i];
if(operate.checked==true){
e.checked=true;
}else{
e.checked=false; }</script>
本文分享了一位开发者如何使用JS实现复选框全选功能的技术细节,包括CSS样式代码、HTML代码和相关JS代码,旨在帮助其他开发者解决类似问题。

被折叠的 条评论
为什么被折叠?



