复选框选择功能大全 -

tanglong8848

浏览: 71191 次
性别:
来自: 北京

最近访客更多访客>>

wenfei852283049

zjutxujie

heaven孤城

LD_21

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (144)

社区版块

存档分类

复选框选择功能大全

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">

function chkThese(chkObj) {

//多行多列选择
$("[id*="+chkObj.id+"]:checkbox").attr("checked",chkObj.checked);
var n = chkObj.id;
var names = n.split('-');

//取消选择
if(chkObj.checked!=true){
$("[id="+names[0]+"]:Checkbox").removeAttr("checked");
$("[id="+names[1]+"]:Checkbox").removeAttr("checked");
$("[id="+names[1]+"-"+names[2]+"]:Checkbox").removeAttr("checked");
}

//判断是否全选,如果全部选择，则全部checkbox都选择
var isChk=true;
var oL=document.getElementsByName(chkObj.name);
if(oL!=null){
if(oL.length>0){
for(var i=0;i<oL.length;i++){
if(oL[i].checked==false){
isChk=false;
break;
}
}
}
}
if(isChk==true) {
$("[id="+names[0]+"]:Checkbox").attr("checked",true);
$("[id="+names[1]+"]:Checkbox").attr("checked",true);
$("[id*=]:Checkbox").attr("checked",true);
}

//行选择
var arr = $("[id*="+names[0]+"]:Checkbox");
var fChk = true;
for(var i=1;i<arr.length;i++) {
if(arr[i].checked==false) {
fChk = false;
break;
}
}
if(fChk==true) {
arr = $("[id*="+names[0]+"]:Checkbox").attr("checked",true);
}

//列选择
var arrs = $("[id*="+names[2]+"]:Checkbox");
var cChek = true;
for(var i=1;i<arrs.length;i++) {
if(arrs[i].checked==false) {
cChek = false;
break;
}
}
var cxsCheck = true;
if(cChek==true) {
$("[id*="+names[2]+"]:Checkbox").attr("checked",true);
}

//多列选择
var cxs = $("[id*="+names[1]+"]:Checkbox");
for(var i=1;i<cxs.length;i++) {
if(cxs[i].checked==false) {
cxsCheck = false;
break;
}
}
if(cxsCheck==true) {
$("[id*="+names[1]+"]:Checkbox").attr("checked",true);
}

//取消行选
var dys = $("[name*='dy']:Checkbox");
for(var i=0;i<dys.length;i++) {
$(dys[i]).bind("click", function(){
for(var j=0;j<dys.length;j++) {
if(dys[j].checked==false) {
$("[name='lc']:Checkbox").removeAttr("checked");
}
}
}
);
}

//取消列选
var lcs = $("[name='lc']:Checkbox");
for(var i=0;i<lcs.length;i++) {
$(lcs[i]).bind("click",function() {
for(var j=0;j<lcs.length;j++) {
if(lcs[j].checked==false) {
$("[name*='dy']:Checkbox").removeAttr("checked");
}
}
});
}
}

</script>
<style>
li {list-style:none;}
td {text-align:center;}
</style>
</head>
<body>
<center >
<table border="1" id="tab">
<tr>
<td width="69" height="113" rowspan="2">楼层</td>
<td height="55" colspan="4">
<input type="checkbox" id="A-" name="dy" value="checkbox" onclick="chkThese(this)">A
</td>
<td colspan="4">
<input type="checkbox" id="B-" name="dy" value="checkbox" onclick="chkThese(this)">B
</td>
</tr>
<tr>
<td height="28" colspan="2">
<input type="checkbox" id="A-A1" name="dy-cx" value="checkbox" onclick="chkThese(this)">1
</td>
<td height="28" colspan="2">
<input type="checkbox" id="A-A2" name="dy-cx" value="checkbox" onclick="chkThese(this)">2
</td>
<td colspan="2">
<input type="checkbox" id="B-B1" name="dy-cx" value="checkbox" onclick="chkThese(this)">1
</td>
<td colspan="2">
<input type="checkbox" id="B-B2" name="dy-cx" value="checkbox" onclick="chkThese(this)">2
</td>
</tr>
<tr>
<td height="107">
<input type="checkbox" id="3F" name="lc" value="checkbox" onclick="chkThese(this)">3F
</td>
<td width="70">
<div class='cell-layout'>
<ul class="left-over"><li></li></ul>
</div>
<div class='detail'></div>
<div class='detail'>
<input type="checkbox" id="3F-A-A1" name="house" value="checkbox" onclick="chkThese(this)">3A-1
</div>
</td>
<td width="75">
<P>
<div class='cell-layout'>
<li>122.00m2</li>
<li>两房一厅</li>
<li>园林/东南</li>
<li>A套餐</li>
</div>

</td>
<td width="53">
<div class='cell-layout'>
<ul class='left'><li></li></ul>
</div>
<div class='detail'></div>
<div class='cell-layout'>
<span class="detail"> <input type="checkbox" id="3F-A-A2" name="house" value="checkbox" onclick="chkThese(this)"> 3A-2</span>
</div>
</td>
<td width="92">
<P>
<div class='cell-layout'>
<ul class='right'>
<li>122.00m2</li>
<li>两房一厅</li>
<li>园林/东南</li>
<li>A套餐</li>
</ul>
</div>
</td>
<td width="53">
<div class='cell-layout'>
<ul class='left'><li></li></ul>
</div>
<div class='detail'></div>
<div class='cell-layout'>
<div class='cell-layout'>
<ul class='left'><li></li></ul>
</div>
<div class='detail'></div>
<div class='cell-layout'>
<span class="detail"> <input type="checkbox" id="3F-B-B1" name="house" value="checkbox" onclick="chkThese(this)"> 3B-1</span>
</div>
</div>
</td>
<td width="86">

<li>122.00m2</li>
<li>两房一厅</li>
<li>园林/东南</li>
<li>A套餐</li>
</td>
<td width="59">
<div class='cell-layout'>
<div class='cell-layout'>
<div class='detail'></div>
<div class='cell-layout'>
<span class="detail"> <input type="checkbox" id="3F-B-B2" name="house" value="checkbox" onclick="chkThese(this)"> 3B-2</span>
</div>
</div>
</div>
</td>
<td width="112">
<P>
<ul class='right'>
<li>122.00m2</li>
<li>两房一厅</li>
<li>园林/东南</li>
<li>A套餐</li>
</ul>
</td>
</tr>
<tr>
<td width="69" height="107">
<input type="checkbox" id="2F" name="lc" value="checkbox" onclick="chkThese(this,'2F')">2F
</td>
<td width="70">
<div class='cell-layout'>
<ul class="left-over"><li></li></ul>
</div>
<div class='detail'></div>
<input type="checkbox" id="2F-A-A1" name="house" value="checkbox" onclick="chkThese(this)">2A-1
</div>
</td>
<td width="75">
<P>
<ul class="left-over"><li></li></ul>
<ul class='right'>
<li>122.00m2</li>
<li>两房一厅</li>
<li>园林/东南</li>
<li>A套餐</li>
</ul>
</td>
<td width="53">
<div class='cell-layout'>
<span class="detail"> <input type="checkbox" id="2F-A-A2" name="house" value="checkbox" onclick="chkThese(this)"> 2A-2</span>
</div>
</td>
<td width="92">
<P>
<ul class='right'>
<li>122.00m2</li>
<li>两房一厅</li>
<li>园林/东南</li>
<li>A套餐</li>
</ul>
</td>
<td width="53">
<div class='cell-layout'>
<ul class='left'><li></li></ul>
</div>
<div class='cell-layout'>
<div class='cell-layout'>
<span class="detail"> <input type="checkbox" id="2F-B-B1" name="house" value="checkbox" onclick="chkThese(this)"> 2B-1</span>
</div>
</div>
</td>
<td width="86">
<P>
<ul class='left'><li></li></ul>
<ul class='right'>
<li>122.00m2</li>
<li>两房一厅</li>
<li>园林/东南</li>
<li>A套餐</li>
</ul>
</td>
<td width="59">
<div class='cell-layout'>
<ul class='left'><li></li></ul>
</div>
<div class='cell-layout'>
<div class='cell-layout'>
<div class='cell-layout'>
<span class="detail"> <input type="checkbox" id="2F-B-B2" name="house" value="checkbox" onclick="chkThese(this)"> 2B-2</span>
</div>
</div>
</div>
</td>
<td width="112">
<P>
<ul class='left'><li></li></ul>
<ul class='right'>
<li>122.00m2</li>
<li>两房一厅</li>
<li>园林/东南</li>
<li>A套餐</li>
</ul>
</td>
</tr>
</table>
</center>
</body>
</html>