如何使用 javascript 获取所选单选按钮的 label

Question

I have the following HTML

<div class="form-radios" id="edit-submitted-lunchset-lunch"><div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="1" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-1">  <label for="edit-submitted-lunchset-lunch-1" class="option">12:00 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="2" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-2">  <label for="edit-submitted-lunchset-lunch-2" class="option">12:30 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="3" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-3">  <label for="edit-submitted-lunchset-lunch-3" class="option">13:00 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="4" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-4">  <label for="edit-submitted-lunchset-lunch-4" class="option">13:30 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="5" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-5">  <label for="edit-submitted-lunchset-lunch-5" class="option">14:00 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" checked="checked" value="6" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-6">  <label for="edit-submitted-lunchset-lunch-6" class="option">14:30 </label>

</div>
</div>

I am trying to retrieve the label associated with the radio button instead of the value using the following javascript but the variable "chosentime" is still "unassigned". I checked my code by throwing in a few alerts the alert(radios[i].innerhtml); throws unassigned

var radios = document.getElementsByName('submitted[lunchset][lunch]');
for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        alert(i);
        alert(radios[i].value);
        alert(radios[i].innerhtml);
        chosentime = radios[i].innerhtml;
    }
}
window.alert(chosentime);
}

Would appreciate any help. Thanks in advance.

Answer 1

You have to access the corresponding label separately, since it resides in a separate tag. Because the labels' for attribute is equal to its option's id , you can get to the label easily:

for(var i=0; i<radios.length; i++) {
    var selector = 'label[for=' + radios[i].id + ']';
    var label = document.querySelector(selector);
    var text = label.innerHTML;
    // do stuff
}

Also check out this fiddle

Answer 2

A radiobutton have no innerhtml. You need to target the label. If it's always directly after the radio-button, try something like radios[i].nextSibling.innerhtml .

Answer 3

Using modern Javascript and CSS this is easy now.

input.labels

Give your button an id , and then give the label a for='id' making sure it is the same id as the button.

Buttons can have multiple labels so it returns a NodeList, if you only have 1 label, just take the first item in the list.

radioButtonClicked.labels[0];

Docs here.

Here is an example of how you would setup the HTML:

    <div class="controls">
        <input type="radio" name="select" id="large" class="radioButtons" checked>
        <input type="radio" name="select" id="medium" class="radioButtons">
        <input type="radio" name="select" id="small" class="radioButtons">
        <input type="radio" name="select" id="tiny" class="radioButtons">
       
        <label for="large" class="option option-1 checked">
            <span class="optionLabel">Large</span>
        </label>

        <label for="medium" class="option option-2">
            <span class="optionLabel">Medium</span>
        </label>

        <label for="small" class="option option-3">
            <span class="optionLabel">Small</span>
        </label>

        <label for="tiny" class="option option-4">
            <span class="optionLabel">Tiny</span>
        </label>
    </div>