Question

I’m trying to use a select all checkbox to select a column of checkboxes.

So I gave all the ones I want checked off at once the same name ABoxesElement so that I can easily check them all on in javascript.

However when I use firebug in firefox I can see that the checkboxes did not keep the name I gave them but pre-pended the component name and appended an auto-incrementing number to my checkboxes.

Since I cannot use regex in getElementByName how can I go about setting the same value in multiple checkboxes. (ID is used for something else).. here is my code:

Select All Checkbox

<dmf:checkbox
name="ABoxes"
onclick = 'selectAllACheckBoxes'
id="allABoxes"  
runatclient="true"/>

Example of one of the checkboxes that I want checked

<dmf:checkbox  
name="ABoxesElement" 
id="<%=...%>" 
runatclient="true"/>

****Example of Javascript ****

function selectAllCheckBoxes(source) {
var checked = source.checked 
var cbName = source.name + 'Element';  
var col = document.getElementsByName(cbName);

for (var i=0; i<col.length;i++) 
{
col[i].checked = checked;
col[i].disabled = !checked;                         
} 
}       

When the page renders however I notice that the name of the individual checkboxes is not ABoxesElement but something like component_nameAboxesElement_2 so the script won’t work unless getElementsByName can accept regexes.

Any ideas on how to go around this?

the tld for checkbox has another attribute

  <attribute>
     <name>datafield</name>
     <required>false</required>
     <rtexprvalue>true</rtexprvalue>   </attribute>

can use that to store the “name” and then access the element through it?

EDIT HTML OUTPUT for an individual checkbox

<input type="hidden" value="true" id="a1ON_hidden" name="mform_content_AboxesElement_hidden_2"/>
    <input type="checkbox" onclick="setKeys(event);safeCall(selectAllCheckBoxes,this);" value="" title="Click here" id="a1ON" name="form_content_AboxesElement_2"/>

EDIT 2 HTML OUTPUT for a selectall checkbox

<input type="hidden" name="mform_content_ABoxes_hidden_1" id="allABoxes_hidden" value="true"/>
<input type="checkbox" name="mform_content_ABoxes_1" id="marketsAll" title="Click to select" value="" onclick="setKeys(event);safeCall(selectAllCheckBoxes,this);"/>

Answer 1

Here’s a kickoff:

function selectAllCheckboxes(checkboxElement) {
    var allFormElements = checkboxElement.form.elements;
    for (var i = 0; i < allFormElements.length; i++) {
        var formElement = allFormElements[i];
        if (formElement.name.indexOf('mform_content_ABoxes_') == 0) { // Check if its name starts with particular string.
            formElement.checked = checkboxElement.checked;
        }
    }
}

You could eventually pass the 'mform_content_ABoxes_' in as another function argument, or even extract it from checkboxElement.name if you know the patterns used in generating the name attribute.