Workflow Short – Single Selection in Checkbox Group

Today I had a form, on which I had a group of CheckBoxes.  The business process for the workflow demands that out of the 5 CheckBoxes, only one may be selected.

Utilizing the concept defined in this post, I made a change to the default function called when the CheckBox value changes.

Here’s the code for the body onload event to update the onchange function:


var cbArray = Panel1.getElementsByTagName('input');

for (i = 0; i < cbArray.length; i++) {
var eachCB = cbArray[i];
eachCB.parentNode.setAttribute('onchange','unCheckBox(this.firstElementChild.id)');
}

Where “Panel1” is the panel in which I’ve placed the mutually exclusive CheckBoxes.  Using “Panel1” in this way will ensure we do not affect any other CheckBoxes on the page.

Then, the function we’re splicing in (in the Script section):


function unCheckBox(compID){
var ckBoxes = Panel1.getElementsByTagName('input');
for (i = 0; i < ckBoxes.length; i++) {
var eachCB = ckBoxes[i];
if (eachCB.id != compID) { //exclude the clicked checkbox
eachCB.checked = false;
}
}
}

It’s important to note that CheckBox components are wrapped in a span wrapper, which is what actually receives the control ID that is assigned in the component configuration.  That means that we’ll need to occasionally go up or down a level with parentNode or firstElementChild in order to affect the level we need.

Here’s a demo with 3 CheckBoxes in our target panel, and another CheckBox outside of it.

checkboxes


Featured Components

CheckBox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s