Help with checking all related checkboxes

[Wendy S]

I have this working, but I don't think it's done efficiently or the best
way:

<a href="javascript:setAllAccounts(true)">check all</a>
<a href="javascript:setAllAccounts(false)">clear all</a>

function setAllAccounts(value) {
for(i = 0 ; i < document.forms[0].accounts.length; i++ ) {
document.forms[0].accounts.checked = value; } }

And the form has:
<input type="checkbox" name="includeDetail" value="on">
<input type="checkbox" name="accounts" value="99_A_ABCD1234">
<input type="checkbox" name="accounts" value="88_B_EFGH5678">

So it checks only the 'accounts' checkboxes, and leaves the 'includeDetail'
one alone.

First, I don't think the javascript: in the href is recommended. And
second, could I have a function:
setAll( fieldname, value)
instead? If so, how would I do the for loop? My initial attempts just
produced errors.

Thanks,
Wendy in Chandler, AZ

 

[kaeli]

I have this working, but I don't think it's done efficiently or the best
way:

<a href="javascript:setAllAccounts(true)">check all</a>

Eeek!
<a href="someDefaultActionPageForPeopleWithNoScript.html"

function setAllAccounts(value) {
for(i = 0 ; i < document.forms[0].accounts.length; i++ )

Eek!
IE syntax.
Try
for(i = 0 ; i < document.forms[0].elements["accounts"].length; i++ )

First, I don't think the javascript: in the href is recommended. And
second, could I have a function:
setAll( fieldname, value)
instead?

Sure.
function setAllAccounts(e,value) {
for(i = 0 ; i < document.forms[0].elements[e].length; i++ ) {
document.forms[0].elements[e].checked = value; } }

Note: this is inefficient due to repeated evaluations of the length attribute.
To make it even better...
function setAllAccounts(e,value)
{
l = document.forms[0].elements[e].length;
for(i = 0 ; i < l; i++ )
{
document.forms[0].elements[e].checked = value;
}
}

<input type="checkbox" name="myElementName">
....

<a href="someDefaultActionPageForPeopleWithNoScript.html"
onClick="setAllAccounts('myElementName',true);return false;">check all</a>

Another note: to be production quality, the script should check that the element is indeed:
1. part of an array
2. a checkbox (because you use checked property)


--

 

[Thomas 'PointedEars' Lahn]

Please shorten your attribution (by removing superfluid information)
so that it does not exceed the practical 78 columns limit as recommended
by RFCs.

function setAllAccounts(value) {
for(i = 0 ; i < document.forms[0].accounts.length; i++ )

Eek!
IE syntax.

No, DOM Level 0 object references and thus perfectly
working in Mozilla, Opera and the like. However,

for(i = 0 ; i < document.forms[0].elements["accounts"].length; i++ )

is indeed better since it is standards-compliant (W3C-DOM Level 2 HTML).

function setAllAccounts(e,value) {
for(i = 0 ; i < document.forms[0].elements[e].length; i++ ) {
document.forms[0].elements[e].checked = value; } }

Note: this is inefficient due to repeated evaluations of the length attribute.

_Property_, not attribute. And your code
allows for improvement in Pretty Printing.

To make it even better...
function setAllAccounts(e,value)
{
l = document.forms[0].elements[e].length; ^^^^
for(i = 0 ; i < l; i++ ) ^^
{
document.forms[0].elements[e].checked = value; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}
}

Looking up the rest again and again is inefficient as well,
if not more. Besides, "l" and "i" are declared _global_.
Use this instead:

var es = document.forms[0].elements[e];
if (es)
{
var l = es.length;

for (var i = 0; i < l; i++)
{
es.checked = value;
}
}

Performance nevertheless can still be improved by passing
a reference to the "form" element object instead:

function setAllAccounts(oForm, e, value)
{
if (oForm
&& typeof oForm.elements != "undefined")
&& typeof oForm.elements[e] != "undefined")
{
var es = oForm.elements[e];

// ...
}
}

... setAllAccounts(this.form, 'whatever', true); ...

<input type="checkbox" name="myElementName">
....

<a href="someDefaultActionPageForPeopleWithNoScript.html"
onClick="setAllAccounts('myElementName',true);return false;">check all</a>

I would rather use a checkbox indicating that all items are meant and
use its "onclick" handler to check the checkboxes client-side. If
client-side scripting is not present, too much restricted or disabled,
the server-side application then can retrieve the submitted value and
work anyway. The WEB.DE web mail interface I am using takes advantage
of such an implementation.

Another note: to be production quality, the script should check that the element is indeed:

Please wrap your lines before the 80th column (76 is OK, 72 is
recommended to help for reading and making quotations).

1. part of an array

Collection, not array. As such, it may be difficult to determine the
described property, since the "length" property is not restricted to
HTMLCollection and Array objects. However, checkboxes within forms
have been part of collections since DOM 0, so there is practically no
need to check for this. What needs to be checked for is that the
HTMLInputElement object exists, before

2. a checkbox (because you use checked property)

this check should take place. BTW, radiobutton element objects also
have a functional "checked" property.


PointedEars

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen in
Thomas 'PointedEars' Lahn

Please shorten your attribution (by removing superfluid information)
so that it does not exceed the practical 78 columns limit as recommended
by RFCs.

There is no such recommendation as to the length of an attribution.

Moreover, please remember that you are not a native English speaker, and
use a good dictionary to determine correct usage of long words, in order
not to mislead other foreigners.