选择所有复选框JS切换问题

Question

希望有人能帮助我克服对 Javascript 的无知。

我有一个包含复选框的表单，还有一个 JS 可以切换选择/取消选择所有框。到目前为止，一切都按预期进行。

工作中的关键是我在此表单中有多组复选框，我想按组选择/取消选择，而不是表单中的所有复选框。这是 php 和 html 的示例。如您所见，表单位于表格中，并且在标题行中有一个执行操作的复选框。 'resources_req' 是表单中复选框元素的名称

<form method="post" name="add_reservation"> 
<?php for($x=0; $x<count($groups); $x++) : // make seperate display for each group ?>
    <div class="group_<?php echo $group_label; ?>">
    <table class="res">
        <tr>
<!-- form: checkbox all -->
    <?php if($make_res == 'enter') : // adds checkbox to check all ?>
            <th><input type="checkbox"  onClick="toggle(this, 'resources_req[]')" /></th>
    <?php endif; ?>
<!-- end form: checkbox all -->
        </tr>
...
foreach($resources as $resource) { // for each resource/laptop
    $form_start = '<td>';
        $form_start .= '<input type="checkbox" name="resources_req[]" value="'.$resource['id'].'"';
        $form_start .= ' />';
    $form_start .= '</td>';
}
...
    </table>
    </div>
<?php endfor; // loop for each group ?>
<input type="submit" name="add_reservation" value="Make this reservation"  />
</form> 

这里是被调用的 JS：

function toggle(source, element) {
    checkboxes = document.getElementsByName(element);
    for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
}

尽我所能，脚本调用中的“this”指的是表单。我想如果我可以将这些组中的每一个放入他们自己的 div 类中，然后我可以以某种方式引用它，但现在我迷路了。任何帮助或建议表示赞赏！

编辑：我征求建议，有人建议我只发布 html：

<form method="post" name="add_reservation"> 
    <div class="group_A">
        <table>
            <tr>
                <th><input type="checkbox"  onClick="toggle(this, 'resources_req[]')" /></th>
                <th>Name</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="resources_req[]" value="1" /></td>
                <td>John</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="resources_req[]" value="2" /></td>
                <td>Bill</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="resources_req[]" value="3" /></td>
                <td>Fred</td>
            </tr>
        </table>
    </div>
    <div class="group_b">
        <table>
            <tr>
                <th><input type="checkbox"  onClick="toggle(this, 'resources_req[]')" /></th>
                <th>Name</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="resources_req[]" value="4" /></td>
                <td>George</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="resources_req[]" value="5" /></td>
                <td>Tom</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="resources_req[]" value="6" /></td>
                <td>Raymons</td>
            </tr>
        </table>
    </div>
    <input type="submit" name="add_reservation" value="Make this reservation"  />
</form> 

Answer 1

我改变了一些东西：

首先，我没有传递name 的值，而是传递'input' 的tagName。

<input type="checkbox"  onClick="toggle(this, 'input')" />

然后在toggle()函数中，我选择source元素的parentNode，并做一个getElementsByTagName()，这样我就只能得到本地div中的input元素。

另外，我将for-in 循环更改为标准for 循环，这是迭代索引元素的正确循环类型。 for-in 实际上会带来一些问题。

function toggle(source, element) {
    var checkboxes = source.parentNode.getElementsByTagName(element);
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = source.checked;
    }
}

现场示例： http://jsfiddle.net/37mT2/

---

替代方案：

代替parentNode，选择祖先<div>元素，为其分配一个ID，并将其传递给您的toggle()函数。

<input type="checkbox"  onClick="toggle(this, 'input', 'someUniqueId_1')" />

<input type="checkbox"  onClick="toggle(this, 'input', 'someUniqueId_2')" />

---

function toggle(source, element, id) {
    var checkboxes = document.getElementById( id ).getElementsByTagName('input');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = source.checked;
    }
}

或者你可以遍历父节点直到你到达你的第一个<div>元素：

<input type="checkbox"  onClick="toggle(this, 'input')" />

---

function toggle(source, element) {

    while( source && source = source.parentNode && source.nodeName.toLowerCase() === 'div' ) {
        ; // do nothing because the logic is all in the expression above
    }
    var checkboxes = source.getElementsByTagName('input');

    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = source.checked;
    }
}

或者您可以为该级别的<div> 元素指定一个通用类名并向上遍历父节点，直到您到达该类。在下面的代码中，您的 <div> 元素类是“someClassName”：

<input type="checkbox"  onClick="toggle(this, 'input')" />

---

function toggle(source, element) {

    while( source && source = source.parentNode && source.className === 'someClassName' ) {
        ; // do nothing because the logic is all in the expression above
    }
    var checkboxes = source.getElementsByTagName('input');

    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = source.checked;
    }
}

---

编辑：修正了一个错字。我有getElementsById 而不是getElementById。

Answer 2

尽我所能，脚本调用中的“this”指的是表单。我想如果我可以将这些组中的每一个放入他们自己的 div 类中，然后我可以以某种方式引用它，但现在我迷路了。任何帮助或建议表示赞赏！

http://jsfiddle.net/JG4uf/

JavaScript Loops: for...in vs for