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

标签 javascript html

我想制作一个页面,其中包含各种网页的表格,每个网页旁边都有复选框。我希望用户能够选择多个站点,然后使用谷歌栏搜索这些站点。我有一个表格,其中每个单元格都有一个充满复选框的表格。每个单元格都有一个 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/

相关文章:

php - 如何使用请求url提取值

html - 如何修复 <html :select> combo box (contents may be larger but the combo size should be fixed) 的大小

html - Bootstrap 改变背景色

jquery - 通过 JQuery 将工具提示添加到 Bootstrap

javascript - 尝试设置动画时返回错误值 "Counter"

javascript - 聊天系统中出现ping声

javascript - 如何在 CouchDB 0.11 中使用设计文档的 lib 部分

javascript - 来自 XML 节点的 onclick 事件

javascript - ES7 使用await 生成器从一系列promise 中获取结果

javascript - 是否可以使用javascript单击按钮创建iframe