Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

change caption font color for radio button when item is selected

Avatar

Level 5

Hi All.

I have group of RadioButtons and I would like when one of RadioButton from group is selected than font color of caption for that button will change color. If that is possible. How to do it?

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi,

Try some code like this JavaScript in the click event of the RadioButtonList

switch (this.rawValue) {
     case "1":
          this.resolveNode("#field[0]").font.fill.color.value = "255,0,0";
          this.resolveNode("#field[1]").font.fill.nodes.remove(this.resolveNode("#field[1]").font.fill.color);
          this.resolveNode("#field[2]").font.fill.nodes.remove(this.resolveNode("#field[2]").font.fill.color);
          break;
     case "2":
          this.resolveNode("#field[0]").font.fill.nodes.remove(this.resolveNode("#field[0]").font.fill.color);
          this.resolveNode("#field[1]").font.fill.color.value = "0,255,0";
          this.resolveNode("#field[2]").font.fill.nodes.remove(this.resolveNode("#field[2]").font.fill.color);
          break;
     case "3":
          this.resolveNode("#field[0]").font.fill.nodes.remove(this.resolveNode("#field[0]").font.fill.color);
          this.resolveNode("#field[1]").font.fill.nodes.remove(this.resolveNode("#field[1]").font.fill.color)
          this.resolveNode("#field[2]").font.fill.color.value = "0,0,255";
          break;
}

Depending on the number of buttons you have you might want to restructure the code.

This code means only one radio button will be colored at a time, is that what you were after?

View solution in original post

1 Reply

Avatar

Correct answer by
Level 10

Hi,

Try some code like this JavaScript in the click event of the RadioButtonList

switch (this.rawValue) {
     case "1":
          this.resolveNode("#field[0]").font.fill.color.value = "255,0,0";
          this.resolveNode("#field[1]").font.fill.nodes.remove(this.resolveNode("#field[1]").font.fill.color);
          this.resolveNode("#field[2]").font.fill.nodes.remove(this.resolveNode("#field[2]").font.fill.color);
          break;
     case "2":
          this.resolveNode("#field[0]").font.fill.nodes.remove(this.resolveNode("#field[0]").font.fill.color);
          this.resolveNode("#field[1]").font.fill.color.value = "0,255,0";
          this.resolveNode("#field[2]").font.fill.nodes.remove(this.resolveNode("#field[2]").font.fill.color);
          break;
     case "3":
          this.resolveNode("#field[0]").font.fill.nodes.remove(this.resolveNode("#field[0]").font.fill.color);
          this.resolveNode("#field[1]").font.fill.nodes.remove(this.resolveNode("#field[1]").font.fill.color)
          this.resolveNode("#field[2]").font.fill.color.value = "0,0,255";
          break;
}

Depending on the number of buttons you have you might want to restructure the code.

This code means only one radio button will be colored at a time, is that what you were after?