复选框选择功能大全

转载 2011年01月18日 11:54:00

<!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>

 

复选框的全选反选实现(即购物车的复选框实现)

这周工作时在做全选时遇到卡壳,趁着闲暇时间整理一下全选的的几种实现方式。 html页面 测试页面 全选 js代码 第一种方式 ...
  • hushuanghui123
  • hushuanghui123
  • 2017年03月12日 21:04
  • 2227

js中checkbox中的全选和反选效果实现

Document //获取checkbox按钮组 var allpro = document.getElementsByName("c1"); //全选...
  • wangdajiao
  • wangdajiao
  • 2016年10月20日 10:54
  • 2158

jsp页面中实现复选框全选和反选、选中删除功能

jsp中表单页面 /DelectServlet" method=post> 全选/反选 ...
  • u012777182
  • u012777182
  • 2014年06月25日 10:37
  • 5138

复选框选择/全选&amp;&amp;右键功能的实现

  • 2014年05月28日 09:56
  • 94KB
  • 下载

实现复选框选择的功能

2015年4月9日 天气冷 这里以“用户授权”为例说明实现方法一(适合弹出modal的场景):后台代码如下:/** * 用户授权 * */ public String a...
  • u012814005
  • u012814005
  • 2015年04月09日 15:53
  • 494

仿复选框、全选、反选、删除功能等

  • 2015年05月16日 11:57
  • 221KB
  • 下载

MFC CListBox及CTreeCtrl具有复选框功能

  • 2015年12月07日 19:54
  • 4.92MB
  • 下载

树结构 复选框 多选 全选功能

  • 2017年07月18日 13:39
  • 84KB
  • 下载

VB 动态显示、隐藏窗体的标题栏 VB在运行状态动态显示、隐藏窗体的标题栏,勾选复选框将隐藏、取消则显示,虽然此功能实用性不大,这里主要是想让大家了解VB对窗体元素的操作,比如窗口句柄、获得窗口哪方面的特征、指示要设置窗口哪方面特征、如何表示窗口信息的一个Long类型数值等。

  • 2010年03月05日 12:38
  • 140KB
  • 下载

JS下拉复选框,带过滤功能 .(附数据库取值)

  • 2015年08月15日 16:53
  • 494KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:复选框选择功能大全
举报原因:
原因补充:

(最多只允许输入30个字)