HTML 表格，需要一个复选框列

Question

最终这个列表将填充数百行，来自数据库。我将如何使用复选框填充每一行的最后一列？标题处的主复选框在单击后会选中所有其他复选框吗？

 <div class="panel-body">
                <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>IO</th>
                            <th>Signals</th>
                            <th><input name="select_all" value="1" type="checkbox"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd gradeX">
                            <td>1</td>
                            <td>Ambient Temperature</td>
                            <td><input type="checkbox" name="name1" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>2</td>
                            <td>Analog Input 1</td>
                            <td><input type="checkbox" name="name2" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>3</td>
                            <td>Analog Input 2</td>
                            <td><input type="checkbox" name="name3" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>4</td>
                            <td>Backup Battery</td>
                            <td><input type="checkbox" name="name4" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>5</td>
                            <td>Main Power</td>
                            <td><input type="checkbox" name="name5" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>6</td>
                            <td>Signal Strength</td>
                            <td><input type="checkbox" name="name6" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>7</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name7" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>8</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name8" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>9</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name9" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name10" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name11" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name12" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name13" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name14" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name15" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name16" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name17" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name18" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name19" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name20" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name21" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name22" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name23" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name24" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name25" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name26" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name27" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name28" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name29" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name30" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name31" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name32" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name33" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name34" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name35" /></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td><input type="checkbox" name="name36" /></td>
                        </tr>

                    </tbody>
                </table>
            </div>

原文由 J. Doe43 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你需要一些 Javascript，比如：

 var dataTable = document.getElementById('data-table');
var checkItAll = dataTable.querySelector('input[name="select_all"]');
var inputs = dataTable.querySelectorAll('tbody>tr>td>input');

checkItAll.addEventListener('change', function() {
  if (checkItAll.checked) {
    inputs.forEach(function(input) {
      input.checked = true;
    });
  }
});

当您检查标头中的输入时，它会检查所有输入。

原文由 Félix 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您应该使用 Javascript，请参阅以下问题： How to implement “select all” check box in HTML? 您很可能必须手动添加其他复选框以使其在该行上签名。但是回答您的问题，您不必添加所有第二列。

只需保留以下内容：

 <tr class="odd gradeX">
<td>1</td>
<td>Ambient Temperature</td>
</tr>

然后在 Notepad++（例如）中替换整个文档： </tr> 为 <td><input type="checkbox" name="name5" /></td></tr> 。通过这种方式，您可以轻松地将第二列添加到所有行，但是您仍然必须修改它们（例如名称，或者取决于您使用的方法）以签署所需的行。

原文由 Stefan 发布，翻译遵循 CC BY-SA 3.0 许可协议