Skip to main content
bb28222058
bb28222058
Participating Frequently
August 24, 2020
Answered

Different fill colors for same name Check Boxes

  • August 24, 2020
  • 2 replies
  • 1682 views

I'm new to building forms and using JavaScript.

I have two check boxes in my form. Both with the same name because I don't want users to be able to check both. One with an export value of Yes and One with an export value of No.  I simply want the fill color of one to be green when checked and the other to be yellow when checked. I don't want them to be green and yellow constantly as they would if I set their fill color in the appearance tab.

I can use the following JavaScript, which works, but since the boxes are the same name it turns both boxes the same color.

if(event.target.isBoxChecked(0))
{event.target.fillColor = color.green;}else event.target.fillColor = color.white;

I'm sure I am missing an easy solution. Or maybe not?  Any help would be appreciated.

This topic has been closed for replies.
Correct answer try67

"CheckBox1" is what we assumed your field is called, since you never really said what it was... The ".0" and ".1" part of it is the way you refer to the individual widgets in the field group. You need to adjust the code and insert into it the actual field name you're using (or use event.target.name, instead, but still keeping the ".0" and ".1" parts!) and apply it as the MouseUp event of BOTH widgets, and it should work as you've described.

2 replies

Nesa Nurani
Nesa Nurani
Inspiring
August 24, 2020

Here is 3rd way that works for me but in my case need 2 diff names but does same job:

for "checkbox1":
if(event.target.isBoxChecked(0)){
event.target.fillColor = color.green
this.getField("checkbox2").checkThisBox(0,false)
this.getField("checkbox2").fillColor = color.transparent;
}
and for "checkbox2":
if(event.target.isBoxChecked(0)){
event.target.fillColor = color.yellow
this.getField("checkbox1").checkThisBox(0,false)
this.getField("checkbox1").fillColor = color.transparent;
}

 

    try67
    try67
    Braniac
    August 24, 2020

    To do it you would need to access the individual widget, which event.target doesn't do. So you would need to use something like this:

    this.getField("CheckBox1.0").fillColor = (this.getField("CheckBox1").value=="Yes") ? color.green : color.transparent;

    this.getField("CheckBox1.1").fillColor = (this.getField("CheckBox1").value=="No") ? color.yellow : color.transparent;

      ls_rbls
      ls_rbls
      Braniac
      August 24, 2020

      Brilliant! Always so concise and to the point.

       

      This was also working for me:

       

       

      • In one checkbox  using this:
      var f = this.getField("myCheckBox");

if (f.isBoxChecked(0)) {this.getField(f.name+".0").fillColor= color.green; this.getField(f.name+".1").fillColor= color.white;}

else this.getField(f.name+".0").fillColor= color.white;

       

      •  and in the other checkbox using this:

       

      var f = this.getField("myCheckBox");

if (f.isBoxChecked(1)) {this.getField(f.name+".1").fillColor= color.yellow; this.getField(f.name+".0").fillColor= color.white;}

else this.getField(f.name+".1").fillColor=color.white;
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices