Different fill colors for same name Check Boxes

[bb28222058]

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.

[try67]

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]

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;

[bb28222058]

Unfortunately it's not that clear to me.  Sorry to waste your time. Either I'm not understanding or I wasn't clear as to what I was trying to do.

I only have 2 check boxes. They are named the same name so they can't both be checked. Not that it matters but one box means the person is Available and the other box means they are Unavailable. If the user checks the Available check box I want it to have a check mark and be filled in green.  If they check the Unavailable check box I want it to have an "X" and be filled with yellow.

I guess I am confused because the above mentions using CheckBox1.0 and CheckBox1.1.  Do I just not understand the syntax?  Sorry.  I have tried using this several different ways but still have had no success.

[try67 · Accepted solution]

"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.

[bb28222058]

That worked perfectly.  Thank you all for your patience and help.  Greatly appreciated.

[Patricia5FA5]

Hi try67,

Does this work the same on Radio Buttons too? The code as you have written it, will only turn either radio button green if I selected it, and change the other choice white. I want to change only one option red, if it's selected, and pop up an app alert. I've used this following code successfully on a text field:

if (event.value < 0 || event.value > 10.001) { app.alert("Text giving the user directions."); event.target.textColor = color.red;; } else { event.target.textColor = color.black; }

I am trying to make it the same for only one option in a radio button group.

 

[try67]

Yes, it's possible. You can access an individual radio-button in the group in the same way as I described above for check-boxes. You will have to disable the automatic fields highlighting in order to see the fill color, though.

[Patricia5FA5]

Awesome! I got it figured out, but I still want to trigger the app alert. Do I add that code right below? This is what I have but I cannot get it to work:

this.getField("Roof - Horizontal Span Table.0").fillColor = (this.getField("Roof - Horizontal Span Table").value=="Y") ? color.transparent : color.transparent;

this.getField("Roof - Horizontal Span Table.1").fillColor = (this.getField("Roof - Horizontal Span Table").value=="N") ? color.red : color.transparent;

if (event.value == N) { app.alert("The measured rafter horizontal span must be less than or equal to what is shown on the Table 1. Otherwise, this Standard Plan cannot be used."); event.target.textColor = color.red;

}

else

{

event.target.textColor = color.transparent;

}

[Patricia5FA5]

Hi try67,

I was able to find the answer. Thank you.

if (event.target.value=="N")

[Nesa Nurani]

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;
}