Dojo radio button label not showing up

Question

I create a radioButton using this code.

var slotDurationSettingsRow = dojo.create('tr', null, table);
    dojo.create('td', {innerHTML: 'Slot Dauer'}, slotDurationSettingsRow);
    var durationSettingsTD = dojo.create('td', {align: 'right'}, slotDurationSettingsRow);
    var durationSettingsContainer = dojo.create('div', null, durationSettingsTD);

    var radioOne = new dijit.form.RadioButton({
            label:"RadioButton1",
            value: "tea",
            name: "drink",
        },
        durationSettingsContainer);

The button is created but the label attribute doesn't seem to work. please help me find the problem?

Answer 1

You need to create a separate label element, like @Layke mentioned.

var slotDurationSettingsRow = dojo.create('tr', null, table);

dojo.create('td', {innerHTML: 'Slot Dauer'}, slotDurationSettingsRow);

var durationSettingsTD = dojo.create('td', {align: 'right'}, slotDurationSettingsRow);

var durationSettingsContainer = dojo.create('div', null, durationSettingsTD);

var radioOne = new dijit.form.RadioButton({
    value: "tea",
    name: "drink",
}, durationSettingsContainer);

var label = dojo.create('label', {
    innerHTML: 'RadioButton1',
    for: radioOne.id
}, durationSettingsTD);

Here's a fiddle. Note that the label is attached to the durationSettingsTD node.

I would also check the documentation for dijit/form/RadioButton, especially the examples. Note that even with the programmatic example, they have a label element already in place, but the idea is the same.

Answer 2

You can't just create a "label" attribute on the dijit/form/RadioButton widget. You have to actually create your own label and add it to the DOM.

AMD Style

  domConstruct.create("label", {
            for: "Radio_Button_ID",                
            innerHTML: "Label Name"
        }, durationSettingsContainer);

Old pre 1.6< Style

  dojo.create("label", {
            for: "Radio_Button_ID",                
            innerHTML: "Label Name"
        }, durationSettingsContainer);