<!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>
分享到：
相关推荐
QTableWidget表头添加复选框实现全选功能。有点投机取巧，但是功能是实现了。实现很简单。
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选 通过子节点控制父节点及以上父节点是否要选中
spreadjs_列头添加复选框全选功能-demo
树结构 复选框 多选 全选功能
Delphi为树控菜单TreeView增加复选框功能，在点击展开的树形菜单节点项前面显示一个复选框，允许用户选择该复选框的内容，可用于设计编写权限设置，注意里面的注释很有价值，对学习Delphi是相当有用的。
本文通过实例代码给大家介绍了BootStrap Table复选框默认选中功能(从数据库获取到对应的状态进行判断是否为选中状态)，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
NULL 博文链接：https://lhbthanks.iteye.com/blog/2101997
jQuery单选框跟复选框美化代码是一款能够实现单选框 复选框原本的选中，未选中，禁用等功能外，还能够设置选中和未选中的文本信息，标签的最小宽度等。
修改后的dtree,添加了多选框,并可设置多选框默认选择,构造功能树时使用
单击“商品列表”下的复选框，在“您选择的商品”下显示选项，取消勾选则移除选项。包括全选，反选功能。 效果图：http://img.my.csdn.net/uploads/201212/19/1355892213_4318.jpg
第一个是关于复选框全选反选的操作，当然我在里面还加了一个小功能，就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态；反之亦然。 <!DOCTYPE html> <html> <head&...
这边主要实现的功能是选择table的td可以选择当前的记录,同时，实现右键功能，右键的插件是vscontext.jquery.js，右键的话，只实现一级。 界面截图的传送门： ...
类似淘宝购物车功能，选中复选框后，右侧悬浮窗口自动选择产品，亦支持删除重新选择功能，懒人之家推荐下载
该插件是一个树状复选框组件，解决需要划分多级功能的需求，如权限分配、商品划分等功能。
CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下 思路： 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...
支持选择，或者反选，全选多种功能，一款简单小巧的其他代码。特点：1、切换全选/全不选文字；2、根据选中个数更新全选框状态；懒人之家推荐下载
使用SharedPreferences保存用户名和密码的方法，并且存在一个CheckBox复选框可以用以保存密码。记录小功能（登录界面记住密码）模块，具体内容可以观看2023-5-7的两篇文章。如果开发者有一点开发基础，可以直接通过...
在ztree节点后面加了个复选下拉框,打开demo/cn/index.html,点击组合功能演示-radio_checkbox_mulitselect 共存节点看效果
主要介绍了Js实现复选框的全选、全不选和反选,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下