Creating two select all checkboxes for two different columns of checkboxes

I have two columns of checkboxes with a select all checkbox at the bottom of each column. I want the first select all checkbox to check all in one column, and the second select all checkbox to tick all in the second column.

See the foll开发者_StackOverflow中文版owing example - http://www.dtrmedical.com/test-site/index.php?id=3&productid=118

The first select all checkbox works correctly (it ticks everything within the quote column). I can't get the second one to work alongside it. It should just tick/untick all in the sample column.

Can anyone help please?

This is the product tick box:

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

This is the javascript to do the first select all:

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

And these are the select all checkboxes:

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

OK, it looks like each of your "select all" checkboxes has the same name attribute as the rest of the checkboxes in its column, so a pretty minimal change to get it working is to use the function you're already using with a minor change:

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

Instead of getting the checkboxes with a hard-coded name get the ones with the same name as the clicked element. Then both of your "select all" checkboxes can say onClick="toggle(this)" to call the same function.

I would recommend giving all the checkboxes you wish to check the same class, then simply using jQuery (I saw it was already being used on the example page) to check/uncheck everything you need.

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