Question

我有两列复选框，每列底部都有一个全选复选框。我希望第一个全选复选框以检查一列中的所有内容，第二个选中全部复选框以在第二列中勾选所有内容。

请参阅以下示例 - http://www.dtrmedical.com/test-site/index.php?id=3&productid=118

第一个全选复选框正常工作（它会勾选引用列中的所有内容）。我不能让第二个与它一起工作。它应该只是勾选/取消选中样本列中的所有内容。

有人可以帮忙吗？

这是产品复选框：

<td valign="middle" align="center" style="background-color:#C3DCCD;"><input style="margin-top:5px;" type="checkbox" name="products-quote" value="echo $product_option['product_code']; ?>" /></td>
<td valign="middle" align="center" style="background-color:#D3C4DF;"><input style="margin-top:5px;" type="checkbox" name="products-sample" value="echo $product_option['product_code']; ?>" /></td>

这是首先选择所有的javascript：

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('products-quote');
  for(var i in checkboxes)
    checkboxes[i].checked = source.checked;
}
</script>

这些是全选复选框：

    <td valign="middle" align="center" style="background-color:#efefef;"><input style="margin-top:5px;" type="checkbox" onClick="toggle(this)" name="products-quote" value="echo $product_option['product_code']; ?>" /></td>
<td valign="middle" align="center" style="background-color:#efefef;"><input style="margin-top:5px;" type="checkbox" name="products-sample" value="echo $product_option['product_code']; ?>" /></td>

Answer 1

好的，看起来每个“全选”复选框都与其列中的其他复选框具有相同的名称属性，因此使其工作的一个非常小的变化是使用您已经使用的功能稍作改动：

function toggle(source) {
  //checkboxes = document.getElementsByName('products-quote');
  checkboxes = document.getElementsByName(source.name);
  for(var i in checkboxes)
    checkboxes[i].checked = source.checked;
}

不是使用带有硬编码名称的复选框，而是获取与被点击元素同名的复选框。然后，两个“全选”复选框都可以说onClick="toggle(this)"来调用相同的函数。

Answer 2

我建议给你想要检查同一个类的所有复选框，然后简单地使用jQuery（我看到它已经在示例页面上使用）来检查/取消选中你需要的所有内容。

//on check all checkbox
if(this.checked){
  $(".myCheckboxes").attr("checked", true);
}else{
  $(".myCheckboxes").attr("checked", false);
}

为两个不同的复选框列创建两个全选复选框

2 个答案: