HTML实现全选、反选功能的复选框与按钮交互

"该资源是关于在HTML和JavaScript中实现全选、反选和复选框之间联动功能的示例代码。" 在这个示例中，我们看到一个包含全选按钮和多个复选框的表格。全选按钮允许用户一次性选择所有复选框，而反选功能则用于取消所有已选中的复选框。以下是如何使用JavaScript来实现这种功能的详细解释： 首先，HTML部分创建了一个表格，其中包含一个全选复选框（`<input type="checkbox" id="checkAll">`）和多个商品相关的复选框。每个商品项都有一个类名`ck`的复选框，这将用于后续的JavaScript操作。 ```html <table> <tr> <th class="allCheck"> <input type="checkbox" name="" id="checkAll"><span class="all">全选</span></input> </th> <th>商品</th> <th>商家</th> <th>价格</th> </tr> <!-- 商品行 --> <tr> <td><input type="checkbox" name="check" class="ck"></td> <td>商品名称</td> <td>商家名称</td> <td>价格</td> </tr> <!-- 更多商品行... --> </table> ``` 接着，我们需要添加JavaScript代码来处理全选/反选逻辑。这通常在`<script>`标签中或者链接到外部的`.js`文件中完成。以下是一个简单的实现： ```javascript <script> // 获取全选按钮 var checkAll = document.getElementById('checkAll'); // 获取所有具有"ck"类的复选框 var checkboxes = document.getElementsByClassName('ck'); // 监听全选按钮的点击事件 checkAll.addEventListener('click', function() { for (var i = 0; i < checkboxes.length; i++) { // 如果全选按钮被选中，则选中所有复选框 if (this.checked) { checkboxes[i].checked = true; } // 如果全选按钮未被选中，则取消所有复选框的选中状态 else { checkboxes[i].checked = false; } } }); </script> ``` 这段JavaScript代码首先获取了全选按钮的引用，并通过`getElementsByClassName`获取所有商品复选框。然后，它为全选按钮添加了一个点击事件监听器。当全选按钮被点击时，会遍历所有的商品复选框，根据全选按钮的状态（选中或未选中）改变这些复选框的选中状态。 此外，样式表部分定义了一些CSS规则，使得表格看起来更加整洁和易于阅读。例如，设置了表格边框、文字对齐方式、行的背景色等。 这个示例展示了如何利用HTML、CSS和JavaScript来实现全选、反选和复选框的联动效果，这在许多电商或数据筛选场景中非常常见。用户可以通过全选按钮轻松地控制多个复选框的状态，提高了交互的便捷性。