Javascript выбрать все флажки в таблице

Я хочу сделать страницу с таблицей различных веб-страниц с флажками рядом с каждой. Я хочу, чтобы пользователь мог выбирать несколько сайтов, а затем искать сайты, используя панель google. У меня есть таблица, где каждая ячейка имеет форму, заполненную флажками. каждая ячейка имеет кнопку checkall, которая проверяет все параметры в этой ячейке. Я хотел бы добавить флажок, чтобы выбрать все параметры на странице. (да, я мог бы просто оставить этот вариант, но я как бы хочу знать, как получить доступ ко всем ячейкам в ячейках, так что я могу искать с помощью Google, как хочу.) Вот в основном то, что у меня есть. Его секция внутри функции 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>

Ответы

Ответ 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, если все флажки, которые нужно контролировать, являются разветвленными узлами из одного элемента.
В противном случае вы можете выполнить итерацию с последующим поиском имени/имени пользовательского класса, чтобы назвать несколько.

Ответ 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;
}

Ответ 3

Вы пробовали jQuery? Это становится стандартной библиотекой javascript для манипуляций с DOM (использование stackoverflow тоже).

С ним вы можете сделать $(': checkbox'). prop ('checked', true); чтобы проверить каждый флажок на странице (но вы, вероятно, не проверите тогда только в таблице).

Хорошо, в любом случае, начните использовать jQuery, это сделает вашу жизнь проще и счастливее и сэкономит вам много времени.

Ответ 4

имя тега - это бит, который запускает тег html, например <input, поэтому .getElementsByTagName ( "link" ) должен быть .getElementsByTagName ( "input" ), если требуется только name='link', затем if(bxs.name =="link") { ... change the checked }

Ответ 5

... или даже проще, если вы хотите перевернуть все флажки в соответствующей форме:

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