YUI Library Examples: Button Control: Radio Buttons

Creating Radio Buttons

The ButtonGroup class creates a set of Buttons that are mutually exclusive; checking one button in the group will uncheck all others in the group. The ButtonGroup class is defined by YAHOO.widget.ButtonGroup and a ButtonGroup's root HTML element is a <div/>.

A ButtonGroup can be instantiated three different ways:

Using an existing set of <input type="radio"/> elements
Using an existing set of Buttons defined using Button Control HTML
Using no existing HTML

Using an existing set of `<input type="radio"/>` elements

A ButtonGroup can be created from a set of existing <input type="radio"/> elements:


1	<div id="buttongroup1" class="yui-buttongroup">
2	<input id="radio1" type="radio" name="radiofield1" value="Radio 1" checked>
3	<input id="radio2" type="radio" name="radiofield1" value="Radio 2">
4	<input id="radio3" type="radio" name="radiofield1" value="Radio 3">
5	<input id="radio4" type="radio" name="radiofield1" value="Radio 4">
6	</div>
	view plain \| print \| ?

To instantiate a ButtonGroup from existing HTML, pass the id of the ButtonGroup's <div/> element as the first argument to the ButtonGroup constructor and any additional configuration attributes as the second argument via an object literal. The ButtonGroup will automatically search its child nodes for HTML radio buttons (<input type="radio"/>) and use those elements to create instances of YAHOO.widget.Button of type "radio."


1	var oButtonGroup1 = new YAHOO.widget.ButtonGroup("buttongroup1")
	view plain \| print \| ?

Using an existing set of Buttons defined using Button Control HTML

Alternatively, each Button in a ButtonGroup can be defined using the YUI Button HTML: An element with a class of "yui-button" and "yui-radio-button" containing a element with a class of "first-child" containing a <button/> element.


1	<div id="buttongroup2" class="yui-buttongroup">
2	<span id="radio5" class="yui-button yui-radio-button yui-button-checked">
3	<span class="first-child">
4	<button type="button" name="radiofield2" value="Radio 5">
5	Radio 5
6	</button>
7	</span>
8	</span>
9	<span id="radio6" class="yui-button yui-radio-button">
10	<span class="first-child">
11	<button type="button" name="radiofield2" value="Radio 6">
12	Radio 6
13	</button>
14	</span>
15	</span>
16	<span id="radio7" class="yui-button yui-radio-button">
17	<span class="first-child">
18	<button type="button" name="radiofield2" value="Radio 7">
19	Radio 7
20	</button>
21	</span>
22	</span>
23	<span id="radio8" class="yui-button yui-radio-button">
24	<span class="first-child">
25	<button type="button" name="radiofield2" value="Radio 8">
26	Radio 8
27	</button>
28	</span>
29	</span>
30	</div>
	view plain \| print \| ?

<div id="buttongroup2" class="yui-buttongroup">
    <span id="radio5" class="yui-button yui-radio-button yui-button-checked">
        <span class="first-child">
            <button type="button" name="radiofield2" value="Radio 5">
                Radio 5
            </button>
        </span>
    </span>
    <span id="radio6" class="yui-button yui-radio-button">
        <span class="first-child">
            <button type="button" name="radiofield2" value="Radio 6">
                Radio 6
            </button>
        </span>
    </span>
    <span id="radio7" class="yui-button yui-radio-button">
        <span class="first-child">
            <button type="button" name="radiofield2" value="Radio 7">
                Radio 7
            </button>
        </span>
    </span>
    <span id="radio8" class="yui-button yui-radio-button">
        <span class="first-child">
            <button type="button" name="radiofield2" value="Radio 8">
                Radio 8
            </button>
        </span>
    </span>
</div>

To instantiate a ButtonGroup using the Button Control HTML, pass the id of the ButtonGroup's root element (the element with the classes "yui-buttongroup" and "yui-radio-button" applied) as the first argument to constructor and any additional configuration attributes as the second argument via an object literal.


1	var oButtonGroup2 = new YAHOO.widget.ButtonGroup("buttongroup2");
	view plain \| print \| ?

Using no existing HTML

To build a ButtonGroup with no existing HTML, pass a set of configuration attributes as a single argument to the ButtonGroup constructor using an object literal. Add buttons to the ButtonGroup via the addButton or addButtons methods.


1	var oButtonGroup3 = new YAHOO.widget.ButtonGroup({
2	id: "buttongroup3",
3	name: "radiofield3",
4	container: "radiobuttonsfromjavascript" });
5
6	oButtonGroup3.addButtons([
7
8	{ label: "Radio 9", value: "Radio 9", checked: true },
9	{ label: "Radio 10", value: "Radio 10" },
10	{ label: "Radio 11", value: "Radio 11" },
11	{ label: "Radio 12", value: "Radio 12" }
12
13	]);
	view plain \| print \| ?

In most cases, it is necessary to specify the ButtonGroup's id and container (the HTML element that the ButtonGroup should be appended to once created). If an id is not specified for the ButtonGroup, one will be generated using the generateId method of the Dom utility.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 925ms (+0) 7:35:44 AM:
Button  loggerLink
Initialization completed.

INFO 925ms (+1) 7:35:44 AM:

Button null

Setting attribute "href" using source element's attribute value of "btn_example04.html"

INFO 924ms (+50) 7:35:44 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 874ms (+111) 7:35:43 AM:
LogReader  instance0
LogReader initialized

INFO 763ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup2
Initialization completed.

INFO 763ms (+0) 7:35:43 AM:

ButtonGroup buttongroup2

Searching for child nodes with the type of "radio" to add to the button group.

INFO 763ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup2
Button radio8 added.

INFO 763ms (+0) 7:35:43 AM:
Button  radio8
Initialization completed.

INFO 763ms (+0) 7:35:43 AM:

Button null

Setting attribute "value" using source element's attribute value of "Radio 8"

INFO 763ms (+0) 7:35:43 AM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield2"

INFO 763ms (+0) 7:35:43 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 763ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup2
Button radio7 added.

INFO 763ms (+1) 7:35:43 AM:
Button  radio7
Initialization completed.

INFO 762ms (+0) 7:35:43 AM:

Button null

Setting attribute "value" using source element's attribute value of "Radio 7"

INFO 762ms (+0) 7:35:43 AM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield2"

INFO 762ms (+0) 7:35:43 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 762ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup2
Button radio6 added.

INFO 762ms (+0) 7:35:43 AM:
Button  radio6
Initialization completed.

INFO 762ms (+0) 7:35:43 AM:

Button null

Setting attribute "value" using source element's attribute value of "Radio 6"

INFO 762ms (+1) 7:35:43 AM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield2"

INFO 761ms (+0) 7:35:43 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 761ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup2
Button radio5 added.

INFO 761ms (+1) 7:35:43 AM:
Button  radio5
Initialization completed.

INFO 760ms (+0) 7:35:43 AM:

Button null

Setting attribute "value" using source element's attribute value of "Radio 5"

INFO 760ms (+0) 7:35:43 AM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield2"

INFO 760ms (+0) 7:35:43 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 760ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup2
Found 4 child nodes with the class name yui-radio-button  Attempting to add to button group.

INFO 760ms (+1) 7:35:43 AM:
ButtonGroup  buttongroup2
Searching for child nodes with the class name yui-radio-button to add to the button group.

INFO 759ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup1
Initialization completed.

INFO 759ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup1
Button radio4 added.

INFO 759ms (+0) 7:35:43 AM:
Button  radio4
Initialization completed.

INFO 759ms (+0) 7:35:43 AM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 759ms (+0) 7:35:43 AM:

Button null

Setting attribute "value" using source element's attribute value of "Radio 4"

INFO 759ms (+0) 7:35:43 AM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield1"

INFO 759ms (+0) 7:35:43 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 759ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup1
Button radio3 added.

INFO 759ms (+1) 7:35:43 AM:
Button  radio3
Initialization completed.

INFO 758ms (+0) 7:35:43 AM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 758ms (+0) 7:35:43 AM:

Button null

Setting attribute "value" using source element's attribute value of "Radio 3"

INFO 758ms (+0) 7:35:43 AM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield1"

INFO 758ms (+0) 7:35:43 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 758ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup1
Button radio2 added.

INFO 758ms (+1) 7:35:43 AM:
Button  radio2
Initialization completed.

INFO 757ms (+0) 7:35:43 AM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 757ms (+0) 7:35:43 AM:

Button null

Setting attribute "value" using source element's attribute value of "Radio 2"

INFO 757ms (+0) 7:35:43 AM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield1"

INFO 757ms (+0) 7:35:43 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 757ms (+0) 7:35:43 AM:
ButtonGroup  buttongroup1
Button radio1 added.

INFO 757ms (+2) 7:35:43 AM:
Button  radio1
Initialization completed.

INFO 755ms (+0) 7:35:43 AM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 755ms (+0) 7:35:43 AM:

Button null

Setting attribute "value" using source element's attribute value of "Radio 1"

INFO 755ms (+0) 7:35:43 AM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield1"

INFO 755ms (+0) 7:35:43 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 755ms (+0) 7:35:43 AM:

ButtonGroup buttongroup1

Found 4 child nodes with the type of "radio." Attempting to add to button group.

INFO 755ms (+0) 7:35:43 AM:

ButtonGroup buttongroup1

Searching for child nodes with the type of "radio" to add to the button group.

INFO 755ms (+58) 7:35:43 AM:
ButtonGroup  buttongroup1
Searching for child nodes with the class name yui-radio-button to add to the button group.

INFO 697ms (+0) 7:35:43 AM:
ButtonGroup  undefined
Button yui-gen3 added.

INFO 697ms (+1) 7:35:43 AM:
Button  yui-gen3
Initialization completed.

INFO 696ms (+0) 7:35:43 AM:

Button null

No source HTML element. Building the button using the set of configuration attributes.

INFO 696ms (+0) 7:35:43 AM:

Button null

No value specified for the button's "id" attribute. Setting button id to "yui-gen3".

INFO 696ms (+0) 7:35:43 AM:
ButtonGroup  undefined
Button yui-gen2 added.

INFO 696ms (+0) 7:35:43 AM:
Button  yui-gen2
Initialization completed.

INFO 696ms (+0) 7:35:43 AM:

Button null

No source HTML element. Building the button using the set of configuration attributes.

INFO 696ms (+0) 7:35:43 AM:

Button null

No value specified for the button's "id" attribute. Setting button id to "yui-gen2".

INFO 696ms (+0) 7:35:43 AM:
ButtonGroup  undefined
Button yui-gen1 added.

INFO 696ms (+1) 7:35:43 AM:
Button  yui-gen1
Initialization completed.

INFO 695ms (+0) 7:35:43 AM:

Button null

No source HTML element. Building the button using the set of configuration attributes.

INFO 695ms (+0) 7:35:43 AM:

Button null

No value specified for the button's "id" attribute. Setting button id to "yui-gen1".

INFO 695ms (+0) 7:35:43 AM:
ButtonGroup  undefined
Button yui-gen0 added.

INFO 695ms (+2) 7:35:43 AM:
Button  yui-gen0
Initialization completed.

INFO 693ms (+0) 7:35:43 AM:

Button null

No source HTML element. Building the button using the set of configuration attributes.

INFO 693ms (+0) 7:35:43 AM:

Button null

No value specified for the button's "id" attribute. Setting button id to "yui-gen0".

INFO 693ms (+1) 7:35:43 AM:
ButtonGroup  undefined
Initialization completed.

INFO 692ms (+0) 7:35:43 AM:

ButtonGroup undefined

Searching for child nodes with the type of "radio" to add to the button group.

INFO 692ms (+2) 7:35:43 AM:
ButtonGroup  undefined
Searching for child nodes with the class name yui-radio-button to add to the button group.

INFO 690ms (+690) 7:35:43 AM:

ButtonGroup undefined

No source HTML element. Building the button group using the set of configuration attributes.

INFO 0ms (+0) 7:35:43 AM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: Button Control: Radio Buttons

Creating Radio Buttons

Using an existing set of `<input type="radio"/>` elements

Using an existing set of Buttons defined using Button Control HTML

Using no existing HTML

Configuration for This Example

YUI Logger Output:

Logger Console

Button Control Examples:

More Button Control Resources:

YUI Library Examples: Button Control: Radio Buttons

Button Control: Radio Buttons

Creating Radio Buttons

Using an existing set of <input type="radio"/> elements

Using an existing set of Buttons defined using Button Control HTML

Using no existing HTML

Configuration for This Example

YUI Logger Output:

Logger Console

Button Control Examples:

More Button Control Resources:

Using an existing set of `<input type="radio"/>` elements