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的值，而是传递了tagName的{{1}}。

'input'

然后在<input type="checkbox" onClick="toggle(this, 'input')" />函数中，我选择toggle()元素的parentNode，并执行source以便我只获得getElementsByTagName()元素在本地input。

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

for-in

直播示例： http://jsfiddle.net/37mT2/

<强>备选方案：

而不是function toggle(source, element) { var checkboxes = source.parentNode.getElementsByTagName(element); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = source.checked; } }，选择祖先parentNode元素，为其指定一个ID，然后将其传递给<div>函数。

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>元素类是“someClassName”：

<div>

<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。

Answer 2

最好我可以放在一起，脚本调用中的'this'指的是表单。我想如果我把这些组中的每一组都放到他们自己的div类中，那么我可以某种方式参考那个，但现在我只是输了。任何帮助或建议赞赏！

http://jsfiddle.net/JG4uf/

JavaScript Loops: for...in vs for

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

2 个答案: