Workflow Soluiton

Hello,

I have a list of check boxes on a web form and I would like to be able to add the funcionality that if a checkbox component is checked the text beside the check box will stand out somehow (by either changing the text colour or perhaps an asterix beside it, etc) but I can't seem to find any way to do this? Does anyone have any suggestions?

If you want to keep it real simple and use an asterisk, add an HTML Merge Component. Edit it and set the text to an asterisk and color/bold if necessary (HTML Merge component has toolbar feature in the text editor to add color/formatting to text). Edit your checkbox component and on the Functionality tab, under Custom Events, click 'Add' and select 'HideControlIfValueIsNullOrEmpty'. For the 'Target Component', set it to your HTML Merge component.

Add a custom onclick component to your checkbox:

1. Make the Control ID of the checkbox "yadda" (no dbl quotes)

2. For the checkbox, add a AttributeKeyValuePair custom event to the Custom Events in Functionality / Behavior

Make the event onclick, and add the event handler script as follows:

//BEGIN SCRIPT

var checkbox = document.getElementById('yadda');

var label = document.getElementById('yadda').nextSibling;

while(label.nodeName.toLowerCase()!='label') label=label.nextSibling;

if(checkbox.checked)

label.innerHTML = '*' + label.innerHTML;

else

label.innerHTML = label.innerHTML.substr(1);

//END SCRIPT

Tested in IE8 and it works.

Thanks for both the suggestions, I'm going to start with Reecardo's as it's my preference...will let you know how it works.

Cheers!

So I tried the script method first, it did not appear to do anything. I'm not a scripting guy but by looking at it I'd guess it's supposed to make an asterisk appear when the check box is clicked. We do not use IE8 yet so I could only test this on 7?

I'd much rather have the description text of the check box turn red when the item is checked and then back to black if unchecked...anyone have any ideas?

As for the second suggestion for creating an HTML merge component, it did not appear when the check box was clicked either? Not sure what I am doing wrong but any other ideas would be greatly appreciated.

I see a 'HilightControlIfValueIsNullOrEmpty' and wonder if that could be used?

Cheers,

E.

Script to change fontcolor on click:

var checkbox = document.getElementById('yadda');

var label = document.getElementById('yadda').nextSibling;

while(label.nodeName.toLowerCase()!='label') label=label.nextSibling;

if(checkbox.checked)

{

label.style.color = "red";

}

else

{ 

label.style.color = "black";

}

Again, tested in IE8 and it works (it should work in IE7 as well). Also, this script was used for a CheckBox, and not the CheckBoxList component. You can see the attached .package (renamed to .zip so I can upload). Ignore any notification you might get that it's in a higher version, I'm on a trunk build

Attachment(s)

WebFormsProject1.zip   1.02 MB 1 version

Thanks reecardo...This worked...I was using a CheckBoxList, changing to a CheckBox for each item worked fine.

E.