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

javascript选择表中的所有复选框

javascript html

javascript选择表中的所有复选框,javascript,html,Javascript,Html,我想做一个网页，有一个不同的网页与复选框旁边的表格。我希望用户能够选择多个网站，然后使用谷歌搜索栏搜索网站。我有一张表格，每个单元格都有一张填有复选框的表格。每个单元格都有一个checkall按钮，用于检查该单元格中的所有选项。我想添加一个复选框来选择页面上的所有选项。（是的，我可以省略这个选项，但我想知道如何访问单元格中的所有框，这样我就可以像我想的那样用谷歌搜索。）以下是我的基本资料。此时需要帮助的是checkPage函数中的部分 <html> <head> <

我想做一个网页，有一个不同的网页与复选框旁边的表格。我希望用户能够选择多个网站，然后使用谷歌搜索栏搜索网站。我有一张表格，每个单元格都有一张填有复选框的表格。每个单元格都有一个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>


函数checkAll（checkname，bx）{
对于（i=0；i

标记名是启动html标记的位，例如

函数checkAll（bx）{
var cbs=document.getElementsByTagName（'input'）；
对于（变量i=0；i

从复选框的onclick属性调用该函数以选中所有
<input type="checkbox" onclick="checkAll(this)">



编辑我有点误读了你的问题，我看到你在代码中尝试了它。getElementsByTagName必须是复数形式，您可能会在那里输入错误，并且必须是上面答案指定的标记
编辑：将主复选框作为参数传递将允许按照vol7ron的建议切换选中/取消选中，并在本答案中进行了适当修改

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

但是，提供对要查找复选框的元素的控制可以通过多种方式实现，太多了，无法详细说明，但示例可以是document.getElementById（id）.getElementsByTagName，如果要控制的所有复选框都是来自一个元素的分支节点
否则，您可以通过进一步的标记名检索/自定义类名检索来列举一些
 示例：
你试过jQuery吗？它正在成为用于DOM操作的javascript标准库（stackoverflow也使用in）
使用它，您可以执行$（'：checkbox'）.prop（'checked'，true）；选中页面上的每个复选框（但您可能不希望只在表中选中）
不管怎样，开始使用jQuery吧，它会让你的生活更轻松、更快乐，也会为你节省很多时间。
。。。或者，如果您希望翻转相应表单中的所有复选框，则更简单：
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;
        }
    }
}

函数checkAll（bx）{
var-form=bx.form；
var ischecked=bx.checked；
对于（变量i=0；i



使用vanilla 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)">


这一个成功了，谢谢。但是为了达到我的目的，我删除了整个if语句，并将其替换为cbs[I].checked=bx.checked？真：假；要使其成为切换开关，此代码仅适用于按钮。如果这个人取消勾选这个复选框，它就不会取消勾选你所有的复选框。@vol7ron我选他的时候，你的答案还没有被勾选出来。是的，这是一个直接的情景回答，如果你注意到我的回答，我将替换代码以切换复选框。非常感谢，这正是我搜索的内容。如果OP确实在链接之后，那么集合将是比getElementsByTagName更好的选择，因为它只获得链接，而不是可能是锚的元素。
<input type="checkbox" onclick="checkAll(this)">

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

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