Label Change when Checkbox Checked

When a checkbox is checked or unchecked, its label can change accordingly. A label is the text provided so the user knows what the checkbox is for.

When the label changes, it can be bolded, its color changed, even the text of the label can be changed. Whatever change you want to provide.

Generally, although not necessarily, the label change would provide a clue to the user about the checked/unchecked state of the checkbox.

An Example

Here's an example. The label changes when its corresponding checkbox is checked.

My favorite color is blue. My favorite color is blue.

Give the example a try. The checkbox label changes when the box is checked or unchecked.

This article is a result of a "was this article helpful?" comment at the Click Text to Check/Uncheck Radio Buttons and Checkboxes article asking that when a checkbox is checked, its label text should change. Using the technique presented here, it's easily done.

How it Works

There are two versions of each of checkbox label. One version is undisplayed, the other displayed.

When the checkbox is checked, the corresponding label version is displayed and the other is undisplayed. When unchecked, the opposite.

Implementing Label Change when Checkbox Checked

Implement the functionality by putting the example on your test page, then making changes.

Here's the code for the example. Notes on how to make the changes follow the code.

<input type="checkbox" id="my-checkbox" onclick="ChangeCheckboxLabel(this)"> 
<span id="my-checkbox-checked" style="display:none; font-weight:bold; color:blue;">My favorite color is blue.</span>
<span id="my-checkbox-unchecked" style="display:inline; font-style:italic;">My favorite color is blue.</span>

<script>
// Will Bontrager Software, LLC
// https://www.willmaster.com
// December 20, 2014
function ChangeCheckboxLabel(ckbx)
{
   var d = ckbx.id;
   if( ckbx.checked )
   {
      document.getElementById(d+"-checked").style.display = "inline";
      document.getElementById(d+"-unchecked").style.display = "none";
   }
   else
   {
      document.getElementById(d+"-checked").style.display = "none";
      document.getElementById(d+"-unchecked").style.display = "inline";
   }
}
</script>

Notes on how to make changes for your own implementation.

First of all, the JavaScript is copy and paste. No customization required. It can be pasted anywhere on the page or imported from an external file.

All customization is in the checkbox code and its label.

Notice the id values are colored blue. Notice also that the checkbox has two labels (although only one at a time will be displayed).

Leave the id values as they are for now and make other changes you need for your implementation.

The checkbox field is likely to require a name attribute field. Perhaps also a value attribute.

Update the checkbox labels according to your needs.

Now that those changes are done, let's talk about the id values.

Notice that the id value of the checkbox is repeated in the id values of both of the checkbox labels, except there's some text appended.

The label to display when the checkbox is checked, has -checked appended. The label to display when the checkbox is unchecked, has -unchecked appended.

Thus:

• my-checkbox (id value of checkbox)
• my-checkbox-checked (id value of "checked" label)
• my-checkbox-unchecked (id value of "unchecked" label)

If you change the id value of the checkbox, the id values of the corresponding labels also need to be changed.

To make more than one checkbox, repeat the process. Make a copy of the example checkbox and labels code and modify them. The id value needs to be different than the id value of the previous checkbox or checkboxes. (All id values need to be unique on the page.)

The JavaScript will service as many checkboxes with label changes as you wish to code. No changes need to be made to the JavaScript provided in the code box above.

Your checkboxes's labels change when their box is checked or unchecked.

Advanced Technique

When the user reloads the page, some browsers leave the checked checkboxes checked and the unchecked ones unchecked according to the state they had when the page was reloaded. In that case, the default label text will be shown regardless the state of the checkbox.

To make the label text display according to the checkbox state when the page is reloaded, put this JavaScript somewhere, anywhere, below the checkbox:

<script>
ChangeCheckboxLabel(document.getElementById("my-checkbox"));
</script>

Notice the checkbox id value colored blue in the code. That's the id value of the checkbox.

When the JavaScript runs, it sends the checkbox identification to the ChangeCheckboxLabel() function, which then displays/undisplays the checkbox's label as needed to match the checked state of the checkbox.

If you have more than one checkbox, add an extra ChangeCheckboxLabel(... line for each checkbox.

Now, your checkboxes's labels change when the box is checked or unchecked and also restore their state when the page is reloaded.

(This article first appeared in Possibilities ezine.)

Will Bontrager