Skip to main content
James Ronan
James Ronan
Known Participant
February 28, 2018
Answered

Merging multiple radio button groups for one possible result

  • February 28, 2018
  • 1 reply
  • 3389 views

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

This topic has been closed for replies.
Correct answer Tomas Sinkunas

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

1 reply

Dan Ebberts
Community Expert
Dan EbbertsCommunity Expert
Community Expert
February 28, 2018

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
James RonanAuthor
Known Participant
March 1, 2018

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
Tomas SinkunasCorrect answer
Legend
March 2, 2018

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
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices