Question

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

Answer 1

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)">

编辑我误解了你的问题，我发现你已经在你的代码中尝试过了。 getElement s ByTagName必须是复数，你可能在那里打字错误，必须是上面答案指定的标签

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

问题请求页面上的所有复选框，这样就足够了。

但是，可以通过多种方式控制哪些元素可以查找复选框。详细说明，但是如果要控制的所有复选框都是来自一个元素的分支节点，则示例可以是document.getElementById（id）.getElementsByTagName。
否则，您可以遍历另一个标记名称检索/自定义类名检索，仅举几例。

Answer 2

示例：http://jsfiddle.net/vol7ron/kMBcW/

function checkPage(bx){                   
   for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--; )
      for (var bxs=tbls[i].getElementsByTagName("input"), j=bxs.length; j--; )
         if (bxs[j].type=="checkbox")
            bxs[j].checked = bx.checked;
}

Answer 3

你试过jQuery吗？它正在成为DOM操作的javascript标准库（stackoverflow也在使用中）。

有了它，你可以做$（'：复选框'）。prop（'checked'，true）;检查页面上的每个复选框（但你可能不会只在表格中检查）。

无论如何，开始使用jQuery，它将使您的生活更轻松，更快乐，并为您节省大量时间。

Answer 4

使用香草js

checkAll = box => {
const checkboxes = document.getElementsByTagName('input')
for (const checkbox of checkboxes) {
  if (checkbox.type == 'checkbox')
    checkbox.checked = box.checked
}

输入您的html

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

Answer 5

标记名称是启动html标记的位，例如<input，因此如果您只想.getElementsByTagName ( "link" )，那么.getElementsByTagName ( "input" )应为name='link' <{1}} < / p>

Answer 6

...如果您想要翻转相应表单中的所有复选框，甚至更简单：

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

...

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

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

6 个答案: