Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Check Box Color Appearance

Avatar

Level 5

I wish to set red color with JavaScript for Check Box.

check.jpg

How Can I do?

1 Accepted Solution

Avatar

Correct answer by
Former Community Member

The attached uses a button click event to toggle the colour of the clickable area in a checkbox.

// form1.page1.subform1.btn::click - (JavaScript, client)

if (form1.page1.subform1.resolveNode("btn.caption.value.#text").value == "Make Red") {

          form1.page1.subform1.resolveNode("cb.ui.#checkButton.border.fill.color").value = "255,0,0";

          form1.page1.subform1.resolveNode("btn.caption.value.#text").value = "Reset";

}

else {

          form1.page1.subform1.resolveNode("cb.ui.#checkButton.border.fill.color").value = "255,255,255";

          form1.page1.subform1.resolveNode("btn.caption.value.#text").value = "Make Red";

}

Steve

View solution in original post

2 Replies

Avatar

Correct answer by
Former Community Member

The attached uses a button click event to toggle the colour of the clickable area in a checkbox.

// form1.page1.subform1.btn::click - (JavaScript, client)

if (form1.page1.subform1.resolveNode("btn.caption.value.#text").value == "Make Red") {

          form1.page1.subform1.resolveNode("cb.ui.#checkButton.border.fill.color").value = "255,0,0";

          form1.page1.subform1.resolveNode("btn.caption.value.#text").value = "Reset";

}

else {

          form1.page1.subform1.resolveNode("cb.ui.#checkButton.border.fill.color").value = "255,255,255";

          form1.page1.subform1.resolveNode("btn.caption.value.#text").value = "Make Red";

}

Steve

Avatar

Level 5

Hi Steve,

Thanks a lot.

Your attacment has helped me much.

Thanks me.


The following has evaluated to null or missing: ==> liqladmin("SELECT id, value FROM metrics WHERE id = 'net_accepted_solutions' and user.id = '${acceptedAnswer.author.id}'").data.items [in template "analytics-container" at line 83, column 41] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign answerAuthorNetSolutions = li... [in template "analytics-container" at line 83, column 5] ----