Merging multiple radio button groups for one possible result

[James Ronan]

Hey.

I have 3 groups each with two radio buttons in. I want only one button to checked at a time, but unfortunately you can still check one button from each group.

From looking online, I've read that they all need to have the same name in order to be part of the same 'radio group'. But no matter where I've put a

.name = "sameGroup"

it hasn't worked.

Is this possible? Or do I need to create an eventListener for each button, which unchecks all other buttons upon being clicked.

Here is an example of my code below:

var w = new Window("dialog", "test", undefined, {}); // create window
// create main group
var radGrpMain = w.add('Group', undefined);
radGrpMain.alignChildren = ['left', ' '];
radGrpMain.orientation = 'row';
// create left sub group
var radGrpL = radGrpMain.add('Group', undefined);
radGrpL.orientation = 'column';
// create mid sub group
var radGrpM = radGrpMain.add('Group', undefined);
radGrpM.orientation = 'column';
// create right sub group
var radGrpR = radGrpMain.add('Group', undefined);
radGrpR.orientation = 'column';
// add buttons
var rad1 = radGrpL.add("RadioButton", undefined, "Radio 1");
rad1.value = true; // default true.
rad1.name = "sameGroup";
var rad2 = radGrpL.add("RadioButton", undefined, "Radio 2");
rad2.name = "sameGroup";
var rad3 = radGrpM.add("RadioButton", undefined, "Radio 3");
rad3.name = "sameGroup";
var rad4 = radGrpM.add("RadioButton", undefined, "Radio 4");
rad4.name = "sameGroup";
var rad5 = radGrpR.add("RadioButton", undefined, "Radio 5");
rad5.name = "sameGroup";
var rad6 = radGrpR.add("RadioButton", undefined, "Radio 6");
rad6.name = "sameGroup";
w.show(); // show window

Any help appreciated!

James

[Dan Ebberts]

As far as I know, they would actually have to be defined contiguously within the same group. And I don't think an event handler would help, because one of the buttons within each group always has to be on. You could probably hack something together with checkboxes though.

Dan

[James Ronan]

Hey Dan

Thanks for replying. Darn, I was hoping that wasn't the case. I'll swap to check boxes instead.

Cheers

James

[Tomas Sinkunas · Accepted solution]

It's doable, but it ain't pretty.

1. Create an array in witch you will store radio buttons: var myRadioButtons = [];

2. Once you create a radio button, push it to myRadioButtons array;

3. Assign onClick event to radio button to function that loops through all the radios in array and unchecks them.

So it would look something like this.

var w = new Window("dialog", "test", undefined, {}); // create window 
// create main group 
var radGrpMain = w.add('Group', undefined);
radGrpMain.alignChildren = ['left', ' '];
radGrpMain.orientation = 'row';
// create left sub group 
var radGrpL = radGrpMain.add('Group', undefined);
radGrpL.orientation = 'column';
// create mid sub group 
var radGrpM = radGrpMain.add('Group', undefined);
radGrpM.orientation = 'column';
// create right sub group 
var radGrpR = radGrpMain.add('Group', undefined);
radGrpR.orientation = 'column';
// Store all radio buttons in an array
var myRadioButtons = [];
// add buttons 
var rad1 = radGrpL.add("RadioButton", undefined, "Radio 1");
rad1.value = true; // default true.
rad1.onClick = toggleRadioButtons;
myRadioButtons.push(rad1);
var rad2 = radGrpL.add("RadioButton", undefined, "Radio 2");
rad2.onClick = toggleRadioButtons;
myRadioButtons.push(rad2);
var rad3 = radGrpM.add("RadioButton", undefined, "Radio 3");
rad3.onClick = toggleRadioButtons;
myRadioButtons.push(rad3);
var rad4 = radGrpM.add("RadioButton", undefined, "Radio 4");
rad4.onClick = toggleRadioButtons;
myRadioButtons.push(rad4);
var rad5 = radGrpR.add("RadioButton", undefined, "Radio 5");
rad5.onClick = toggleRadioButtons;
myRadioButtons.push(rad5);
var rad6 = radGrpR.add("RadioButton", undefined, "Radio 6");
rad6.onClick = toggleRadioButtons;
myRadioButtons.push(rad6);
function toggleRadioButtons() {
    for (var i = 0, il = myRadioButtons.length; i < il; i ++) {
        if (myRadioButtons !== this) {
            myRadioButtons.value = false;
        }
    }
    this.value = true;
}
w.show(); // show window

[James Ronan]

Hey Tomas! This is great!

Works a treat. Thanks so much!

James

[Dan Ebberts]

Well you learn something every day. That is very cool indeed.

Dan

[ubusam]

Hi RenderTom,

Can you please tell me how I can check which button is active?

I was trying for loop trough myRadioButtons array to check which value is true, but I'm doing something wrong.

Can you please help me?

Thanks in advance...

[Tomas Sinkunas]

Just like that

for (var i = 0, il = myRadioButtons.length; i < il; i++) {
    if (myRadioButtons.value === true) {
        return myRadioButtons;
    }
}

[ubusam]

Thank you RenderTom,

But I'm getting [object RadioButton].

I know it's working with myRadioButtons.text, but my radio buttons don't have text.

Can I get some other value like index or something else, or radio buttons have to have text so I can know which one is active.

Thanks