jQuery: checkbox that selects (or deselects) all other checkboxes within its group
<p>This may not be as simple as the title makes it out to be.</p>

<p>I have a div set up as a homemade checkbox via classes (1px border, 16px square, custom graphic as the check symbol applied as a background image). When clicked, 'checked' class gets applied. Simple enough. Example (unchecked): <code>&lt;div class="checkbox group1"&gt;&amp;nbsp;&lt;/div&gt;</code></p>

<p>I also have another checkbox (div) that is the 'master' to select all other checkboxes within the same group (group1 in this example). This master has a special class called 'check_all': <code>&lt;div class="checkbox check_all group1"&gt;&amp;nbsp;&lt;/div&gt;</code></p>

<p>So you say, "Simple; when 'check_all' is checked, just check all boxes in group1." Not quite that easy. The check_all is a universal class throughout the entire website so it may be reused on other pages; I may also have it applied to group2, group3, and so on on the same page. I need the jQuery function to check all within the same group ONLY. To further complicate matters, the group names are not sequential or related in any fashion; they could be 'invoices' or 'cart_items' or 'addresses'.</p>

<p>Things I have thought of:</p>

<p>1) Cleanse the master's class attribute of all occurrences of 'checked', 'checkbox', and 'check_all', and use the remaining string as the group name. Problem: there might be more classes than just those applied to the child checkboxes.</p>

<p>2) Append 'check_all_' to the group name: 'check_all_group1'. Problem: jQuery hasclass does not appear to support wildcards to perform a "begins with" to attach the handler function in the first place. Even if it did, you would still have to process the classes and perform string functions to arrive at "group1". Seems clunky and not ideal.</p>

<p>3) Put the master and all children divs in a parent container. This is the closest solution I have come up with, but I can't guarantee that other checkboxes belonging to other groups will not be in the container as well.</p>

<p>A redesign of the whole concept is welcome. I just need a simple way to drop in a reusable class that is attached to a function that will select all other 'checkbox' elements with the same group.</p>

<p><strong>EDIT :</strong>
The solution must be cross-browser supported (even to IE 6.5) because visitors of this site will be worldwide and may not have the latest technology. In fact, recent analysis of the existing site reveals that 10% of the visitors are using browsers over 3 years old. Think globally.</p>

<p><strong>CODE EXAMPLE</strong></p>

<pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;div class="checkbox check_all delete"&gt;&amp;nbsp;&lt;/div&gt;Delete&lt;/td&gt;
    &lt;td&gt;&lt;div class="checkbox check_all mark"&gt;Mark&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;div class="checkbox delete"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;&lt;div class="checkbox mark"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;Line 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;div class="checkbox delete"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;&lt;div class="checkbox mark"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;Line 2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
