[thelist] JavaScript: check all boxes within a table

[.jeff]

bill,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Bill Haenel
>
> > it'd be a trivial task if the names of the checkboxes
> > were unique to each table.
>
> I'm actually trying to avoid this, because it makes
> coding on the receiving end of the form process more
> complicated. [...]
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

that's definitely something to avoid then.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> [...] i.e., instead of running through an array and
> handling each key/value, I'd have to run through an
> array for each individual table. That would work nicely,
> though, for the 'checkall' part, wouldn't it?
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

sure, but there are other options.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> > however, if they're all named the same, you'd need a
> > function that you'd pass the index of the specific
> > checkboxes you wanted to set to all or none checked.
>
> I am pretty sure I could not make this work, since there
> will be a variable number of checkboxes, and I never
> know what the range of indexes might be. I was kind of
> hoping there would be some gee whiz method for
> identifying the contents of a table by id or something.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

you could use some advanced dom tree-walking to find all the checkboxes in a
table, but the browser support would hardly make it worth the trouble.
besides, i think there's an easier way.  when you create these tables and
all the checkboxes, you surely know enough about them to be able to create a
function call to check all of them in any given table.  all you need to know
is their index(es).  assuming a single table, here's some pseudo-code to
show what i mean.  i'll denote server side code by wrapping it in $$ and
assuming arrays are zero-based.

function setChecked(oForm, sElement, bChecked)
{
  for(var i = 3; i < setChecked.arguments.length; i++)
    if(oForm.elements[sElement][setChecked.arguments[i]])
      oForm.elements[sElement][setChecked.arguments[i]].checked = bChecked;
}

$category_id = ['3,117,26,87,156,716,41,29']$ // an array of items

<table>
<thead>
<tr>
  <th><input type="checkbox" id="checkall_0"
  onclick="setChecked(this.form, 'category_id', this.checked
  $(for(var i = 0; i <= category_id.length; i++) ', ' & i)$)" /></th>
  <th><label for="checkall_0">Check All</label></th>
</tr>
</thead>
<tbody>
$(for(var i = 0; i <= category_id.length; i++)
print('
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_$category_id[i]$"
  value="$category_id[i]$" /></td>
  <td><label
for="category_id_$category_id[i]$">$category_id[i]$</label></td>
</tr>
')
)$
</tbody>
</table>

notice i didn't give the checkall checkbox a name.  when run, the code above
would produce the following html:

<table>
<thead>
<tr>
  <th><input type="checkbox" id="checkall_0"
  onclick="setChecked(this.form, 'category_id', this.checked, 0, 1, 2, 3, 4,
5, 6, 7)" /></th>
  <th><label for="checkall_0">Check All</label></th>
</tr>
</thead>
<tbody>
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_3"
  value="3" /></td>
  <td><label for="category_id_3">3</label></td>
</tr>
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_117"
  value="117" /></td>
  <td><label for="category_id_117">117</label></td>
</tr>
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_26"
  value="26" /></td>
  <td><label for="category_id_26">26</label></td>
</tr>
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_87"
  value="87" /></td>
  <td><label for="category_id_87">87</label></td>
</tr>
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_156"
  value="156" /></td>
  <td><label for="category_id_156">156</label></td>
</tr>
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_716"
  value="716" /></td>
  <td><label for="category_id_716">716</label></td>
</tr>
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_41"
  value="41" /></td>
  <td><label for="category_id_41">41</label></td>
</tr>
<tr>
  <td><input type="checkbox" name="category_id"
  id="category_id_29"
  value="29" /></td>
  <td><label for="category_id_29">29</label></td>
</tr>
</tbody>
</table>

when the check all checkbox is clicked, all the indices are past to the
function.  it simply loops over them, checks to see if the element with that
index exists and if so, sets its checked state to the boolean that's passed.

holler if this doesn't make sense.

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/