Example of Creating a Group of RadioButton Components

To execute the example, add links to the PP.js library and to the PP.css visual styles table. Place a group of three RadioButton components to the page.

function RadioGroup(group, text, id, state) {//Add a function that contains values of the RadioButton component properties:

var radiobutton = new PP.Ui.RadioButton({ ParentNode: document.getElementById("radiobuttons"),

Checked: state,//Determines whether component is selected

GroupName: group,//Group name

Content: text,//Text to be displayed next to the radio button

Id: id//Radio button identifier

});

}

//Instances of the RadioButton component. Parameters are values of component properties.

RadioGroup('group1', 'RadioButton1<br/>', "rb1", true);

RadioGroup('group1', 'RadioButton2<br/>', "rb2", false);

RadioGroup('group1', 'RadioButton3', "rb3", false);

</script>

After executing the example the HTML page will contain a group of RadioButton components that consists of three buttons; the first radio button is selected:

When another component in the group is selected, the previously selected radio button is deselected.