asked on

How can I do a Select All on this page?

Here's a screenshot of my page:

I've got several categories on this page that you see in blue. To the right, I want to give the user the ability to "select all" the products that fall under that category.

In the past, I've used something like this:

function checkAll(dfm, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[dfm].getElementsByTagName('input');
 
  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}

Open in new window

But is there a way to pass some kind of id into the function so I don't have to write a function for each category?

Here's my current html / php

Put a check beside each of the products that you want to attach this option / feature configuration to..
		<br><br>
		<table style="width:800px; margin:auto; padding:10px;" border="1" class="table_cell">
		<tr>
		<td style="background-color:#000000; color:#ffffff; padding:10px;">
		Product Name
		</td>
		<td style="background-color:#000000; color:#ffffff; text-align:center; padding:10px;">
		checkbox
		</td>
		</tr>
		<?php
		$current_category_id="";		
		$querystate = "select * from products order by categories ASC, name ASC";
		$resultstate = mysqli_query($cxn, $querystate)
		or die ("Couldn't execute query.");
	
		while ($row=mysqli_fetch_assoc($resultstate))
		{
		extract($row);
		?>
			<?php
			if($current_category_id<>$row['category_id'])
			{
			?>
				<tr>
					<td style="background-color:#0861c5; color:#ffffff; padding:5px;"><?php echo stripslashes($row['categories']);?></td>
					<td style="background-color:#0861c5; padding:5px;text-align:center;">
					<input type="checkbox" value="Y" name="category_box_<?php echo $row['category_id'];?>">
					</td>
				</tr>
			<?php
			}
			?>
		<tr>
			<td style="width:600px; vertical-align:middle; padding:5px;"><?php echo stripslashes($row['name']);?></td>
			<td style="text-align:center; background-color:#cccccc; color:#000000; vertical-align:middle; padding:5px;">
			<input type="checkbox" value="Y" name="product_box_<?php echo $row['id'];?>">
			</td>
		</tr>
		<?php
		$current_category_id=$row['category_id'];
		}
		?>

Open in new window

What do you think?

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chris Stanyon

If you're interested in a jQuery solution, it would be very straight forward. Personally, don't really both with non-jQuery these days :)

Ray Paseur

Agree with Chris -- jQuery would probably be the easiest way to find and change selections

SOLUTION

James Bilous

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Here is my take. Change your PHP code to make it easier to target the category boxes.

1. Give your master rows a class - you can use this to style your rows as well.
2. Use the class in 1 to target the master checkbox for that category
3. Give the master checkbox a custom data attribute that links it to a class that defines the group
4. Add the generated group class to the checkboxes in that group
5. Link the jQuery to the above attributes
HTML

    <table class="table">
      <thead>
        <tr>
          <td>Product Name</td>
          <td>Check Box</td>
        </tr>
      </thead>
      <tbody>
        <tr class="header">
          <td>Base Cabinets/Corner Base Cabinets</td>
          <td><input type="checkbox" name="category_box[1]" value="Y" data-target="category-box-1"/>
        </tr>
        <tr>
          <td>BC36</td>
          <td><input type="checkbox" name="product_box[1]" value="Y" class="category-box-1"/>
        </tr>
        <tr>
          <td>BC39</td>
          <td><input type="checkbox" name="product_box[1]" value="Y" class="category-box-1"/>
        </tr>
        <tr class="header">
          <td>Base Cabinets/Drawer Base Cabinets</td>
          <td><input type="checkbox" name="category_box[2]" value="Y" class="category-box" data-target="category-box-2"/>
        </tr>
        <tr>
          <td>2DB18</td>
          <td><input type="checkbox" name="product_box[3]" value="Y" class="category-box-2"/>
        </tr>
        <tr>
          <td>2DB24</td>
          <td><input type="checkbox" name="product_box[4]" value="Y" class="category-box-2"/>
        </tr>
      </tbody>
    </table>

Open in new window

jQuery

<script>
$(function() {
  $('tr.header :checkbox').click(function() {
    var target = $(this).data('target');
    var state = $(this).prop('checked');
    $('.' + target).prop({checked: state});
  });
});
</script>

Open in new window

Working sample here

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bruce Gust

ASKER

Thank you, gentlemen!