javascript 选择表格中的所有复选框-6ren

javascript 选择表格中的所有复选框

转载作者：技术小花猫更新时间：2023-10-29 12:35:51

我想制作一个页面，其中包含各种网页的表格，每个网页旁边都有复选框。我希望用户能够选择多个站点，然后使用谷歌栏搜索这些站点。我有一个表格，其中每个单元格都有一个充满复选框的表格。每个单元格都有一个 checkall 按钮，用于检查该单元格中的所有选项。我想添加一个复选框来选择页面上的所有选项。 (是的，我可以忽略这个选项，但我有点想知道如何访问单元格中的所有框，以便我可以像我想要的那样使用谷歌搜索。)这基本上就是我所拥有的。此时需要帮助的是 checkPage 函数中的部分

<html>
<head>
<script type="text/javascript">
    function checkAll(checkname, bx) {
        for (i = 0; i < checkname.length; i++){
            checkname[i].checked = bx.checked? true:false;
        }
    }
    function checkPage(bx){


        var bxs = document.getElementByTagName ( "table" ).getElementsByTagName ( "link" ); 

        for(i = 0; i < bxs.length; i++){
            bxs[i].checked = bx.checked? true:false;
        }
    }
</script>


</head>
<body>
<input type="checkbox" name="pageCheck"  value="yes" onClick="checkPage(this)"><b>Check Page</b>
<table border="1" name ="table">

<tr>
    <td name ="list00">
        <form name ="list00">
            <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list00.link, this)"><b>Check All</b><dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
        </form>
    </td>
    <td><form name ="list01">
            <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list01.link, this)"><b>Check All</b><dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>      
        </form></td>
</tr>
<tr>
    <td><form name ="list10">
            <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list10.link, this)"><b>Check All</b><dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>  
        </form></td>
    <td><form name ="list11">
            <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list11.link, this)"><b>Check All</b><dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>  
        </form></td>
</tr>
</table>

</body>
</html>

最佳答案

function checkAll(bx) {
  var cbs = document.getElementsByTagName('input');
  for(var i=0; i < cbs.length; i++) {
    if(cbs[i].type == 'checkbox') {
      cbs[i].checked = bx.checked;
    }
  }
}

从复选框的 onclick 属性调用该函数以选中所有

<input type="checkbox" onclick="checkAll(this)">

编辑我有点误读了你的问题，我看到你已经在你的代码中尝试过了。 getElementsByTagName 必须是复数，您可能在那里打错了并且必须是上面答案指定的标签

编辑:将主复选框作为参数传递将允许按照 vol7ron 的建议切换选中/取消选中，并已在此答案中进行了适当修改。

这个问题要求页面上的所有复选框，所以这就足够了。

但是，可以通过多种方式实现对要查找复选框的元素的控制，太多了详细说明，但示例可以是 document.getElementById(id).getElementsByTagName 如果要控制的所有复选框都是来自一个元素的分支节点。
否则，您可以通过进一步的标签名称检索/自定义类名称检索等进行迭代。

关于javascript 选择表格中的所有复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7251005/