复选框选择功能大全代码,Js代码库,德仔网

代码语言
代码分类
【Js】复选框选择功能大全
作者:新沣 / 发布于2017/3/13/ 352
复选框选择功能大全
<!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>
评论列表
本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
同语言下
可能有用的
新沣贡献的其它代码(9)