几乎找遍整个网络都没找到答案的问题!请高手进来!

时间：2022-04-21 14:41:24
这个问题就是:如何在指定列中全选

比如:
现在页面上这样排列.
其中:cb101是id为101的checkbox,cb102是id为102的checkbox ......
     cb201是id为201的checkbox,cb202是id为202的checkbox ......
     cb301是id为301的checkbox,cb302是id为302的checkbox ......
cbl1为id为1的chekcbox
cbl2为id为2的chekcbox
cbl3为id为3的chekcbox


1     cb101   cb201   cb301
2     cb102   cb202   cb302
3     cb103   cb203   cb303
4     cb104   cb204   cb304
5     cb105   cb205   cb305
     
cbl1   cbl2   cbl3


现在的我要问的问题是:
如何做成,我勾选cbl1,那么对应的cbl101这一列(cbl101,cbl102...)全选,当然了,不勾cbl1对应的cbl101列就不全选.
同理:我勾选cbl2,那么对应的cbl201这一列全选,不勾,就不全选.
当然了,勾选cbl3也是要一样的效果.

如何做?谢谢!

只要能实现功能就可以,不管是怎么做(比如列一个table出来,在td里加标签等等),谢谢!



11 个解决方案

#1

这个，应该还是比较简单的吧，不至于“ 几乎找遍整个网络都没找到答案”

#2

我是真找不到如何实现了.你那有答案?希望你解决!谢谢!

#3

现在的我要问的问题是:
如何做成,我勾选cbl1,那么对应的cbl101这一列(cbl101,cbl102...)全选,当然了,不勾cbl1对应的cbl101列就不全选. 

现在已经可以很清晰的描述出需求
上面的话直接翻成代码就可以了 一点没有冗余

cbl1_slecded_change(){  //比如代表cb101的选择事件

    cbl10{2,...n}.checked=cbl101.checked;
}

#4

function checkAll(type,len,prefix)//prefix就相当于cb
 {//type为类别，相当于cbl1  cbl2  cbl3 ，给cb11这样的添加点解事件
  //len就是要多少个被选中或取消，cb301 。。。。
    var isContinue = true;
    for(var i = ; i<= len;i ++ )
    {
        var cBox = document.getElementById(prefix+(i++));
        if(cBox)
        {
            cBox.checked = !cBox.checked;
        }
        else
        {
            break;
        }
    }
 }
仅做参考

#5

还是搞不定啊.

#6

我写的虽不怎么样?但可以实现.这个例子是你要的效果吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function getRows(){
var objTab = document.getElementById("objTable");
var row = objTab.rows.length;
return row;
}
function cbSelect(objId){
var obj = document.getElementById(objId);
var objSty = objId.substring(3,4);
var row = getRows();
if(obj.checked){
for(var i = 1;i<row;i++){
eval("cb"+objSty+"0"+i).checked = true;
}

}else{
for(var i = 1;i<row;i++){
eval("cb"+objSty+"0"+i).checked = false;
}
}
}

</script>
</head>
<body onload="getRows()">
<table id="objTable">
<tr>
<td> <input type="checkbox" id="cbl1" onclick="cbSelect('cbl1')"/>全选A</td>
<td> <input type="checkbox" id="cbl2" onclick="cbSelect('cbl2')" />全选B</td>
<td> <input type="checkbox" id="cbl3" onclick="cbSelect('cbl3')" />全选C</td>
</tr>
<tr>
<td><input type="checkbox" id="cb101"  /></td>
<td><input type="checkbox" id="cb201"  /></td>
<td><input type="checkbox" id="cb301"  /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb102"  /></td>
<td><input type="checkbox" id="cb202"  /></td>
<td><input type="checkbox" id="cb302"  /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb103"  /></td>
<td><input type="checkbox" id="cb203"  /></td>
<td><input type="checkbox" id="cb303"  /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb104"  /></td>
<td><input type="checkbox" id="cb204"  /></td>
<td><input type="checkbox" id="cb304"  /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb105"  /></td>
<td><input type="checkbox" id="cb205"  /></td>
<td><input type="checkbox" id="cb305"  /></td>
</tr>
</table>
</body>
</html>

#7



function checkAll(ele,len,preName)

{

  for(var i=0;i<len;i++)

  {

    document.getElementById(preName+i).checked = ele.checked;

  }

}


<input type="checkbox" id="cbl1" onclick="checkAll(this,5,'cb10')">

<input type="checkbox" id="cbl2" onclick="checkAll(this,5,'cb20')">

<input type="checkbox" id="cbl3" onclick="checkAll(this,5,'cb30')">

#8

夸张了吧

#9

这么简单.....的问题...

#10

function checkAllCheckBox(o){
var td=o.parentNode;
while(td.tagName!="TD"&&td.tagName!="TH"){
td=td.parentNode;
}
var table=td.parentNode;
while(table.tagName!="TABLE"){
table=table.parentNode;
}

var index=td.cellIndex;
for(var i=0;i<table.rows.length;i++){
var inp=table.rows[i].cells[index].childNodes[0];
while(inp.nodeType!=1){
inp=inp.nextSibling;
}
inp.checked=o.checked;
}
}

<table >
                <tr>
                 <td><input type="checkbox" onclick="checkAllCheckBox(this);"  />全选</td>
              </tr>

            <tr><td>><input type="checkbox"   /></td></tr>
</table>

#11

eval函数

#1

这个，应该还是比较简单的吧，不至于“ 几乎找遍整个网络都没找到答案”

#2

我是真找不到如何实现了.你那有答案?希望你解决!谢谢!

#3

现在的我要问的问题是:
如何做成,我勾选cbl1,那么对应的cbl101这一列(cbl101,cbl102...)全选,当然了,不勾cbl1对应的cbl101列就不全选. 

现在已经可以很清晰的描述出需求
上面的话直接翻成代码就可以了 一点没有冗余

cbl1_slecded_change(){  //比如代表cb101的选择事件

    cbl10{2,...n}.checked=cbl101.checked;
}

#4

function checkAll(type,len,prefix)//prefix就相当于cb
 {//type为类别，相当于cbl1  cbl2  cbl3 ，给cb11这样的添加点解事件
  //len就是要多少个被选中或取消，cb301 。。。。
    var isContinue = true;
    for(var i = ; i<= len;i ++ )
    {
        var cBox = document.getElementById(prefix+(i++));
        if(cBox)
        {
            cBox.checked = !cBox.checked;
        }
        else
        {
            break;
        }
    }
 }
仅做参考

#5

还是搞不定啊.

#6

我写的虽不怎么样?但可以实现.这个例子是你要的效果吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function getRows(){
var objTab = document.getElementById("objTable");
var row = objTab.rows.length;
return row;
}
function cbSelect(objId){
var obj = document.getElementById(objId);
var objSty = objId.substring(3,4);
var row = getRows();
if(obj.checked){
for(var i = 1;i<row;i++){
eval("cb"+objSty+"0"+i).checked = true;
}

}else{
for(var i = 1;i<row;i++){
eval("cb"+objSty+"0"+i).checked = false;
}
}
}

</script>
</head>
<body onload="getRows()">
<table id="objTable">
<tr>
<td> <input type="checkbox" id="cbl1" onclick="cbSelect('cbl1')"/>全选A</td>
<td> <input type="checkbox" id="cbl2" onclick="cbSelect('cbl2')" />全选B</td>
<td> <input type="checkbox" id="cbl3" onclick="cbSelect('cbl3')" />全选C</td>
</tr>
<tr>
<td><input type="checkbox" id="cb101"  /></td>
<td><input type="checkbox" id="cb201"  /></td>
<td><input type="checkbox" id="cb301"  /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb102"  /></td>
<td><input type="checkbox" id="cb202"  /></td>
<td><input type="checkbox" id="cb302"  /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb103"  /></td>
<td><input type="checkbox" id="cb203"  /></td>
<td><input type="checkbox" id="cb303"  /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb104"  /></td>
<td><input type="checkbox" id="cb204"  /></td>
<td><input type="checkbox" id="cb304"  /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb105"  /></td>
<td><input type="checkbox" id="cb205"  /></td>
<td><input type="checkbox" id="cb305"  /></td>
</tr>
</table>
</body>
</html>

#7



function checkAll(ele,len,preName)

{

  for(var i=0;i<len;i++)

  {

    document.getElementById(preName+i).checked = ele.checked;

  }

}


<input type="checkbox" id="cbl1" onclick="checkAll(this,5,'cb10')">

<input type="checkbox" id="cbl2" onclick="checkAll(this,5,'cb20')">

<input type="checkbox" id="cbl3" onclick="checkAll(this,5,'cb30')">

#8

夸张了吧

#9

这么简单.....的问题...

#10

function checkAllCheckBox(o){
var td=o.parentNode;
while(td.tagName!="TD"&&td.tagName!="TH"){
td=td.parentNode;
}
var table=td.parentNode;
while(table.tagName!="TABLE"){
table=table.parentNode;
}

var index=td.cellIndex;
for(var i=0;i<table.rows.length;i++){
var inp=table.rows[i].cells[index].childNodes[0];
while(inp.nodeType!=1){
inp=inp.nextSibling;
}
inp.checked=o.checked;
}
}

<table >
                <tr>
                 <td><input type="checkbox" onclick="checkAllCheckBox(this);"  />全选</td>
              </tr>

            <tr><td>><input type="checkbox"   /></td></tr>
</table>

#11

eval函数
标签：

相关文章