javascript 如何使用javascript获取所选单选按钮的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14709617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the label of the selected radio button using javascript
提问by sridhar pandurangiah
I have the following HTML
我有以下 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
我正在尝试使用以下 javascript 检索与单选按钮关联的标签而不是值，但变量“chosentime”仍然“未分配”。我通过抛出一些警报来检查我的代码 alert(radios[i].innerhtml); 抛出未分配
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.
将不胜感激任何帮助。提前致谢。
回答by MCL
You have to access the corresponding label separately, since it resides in a separate tag. Because the labels' forattribute is equal to its option's id, you can get to the label easily:
您必须单独访问相应的标签，因为它驻留在单独的标签中。由于标签的for属性等于其选项的id，因此您可以轻松获取标签：
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
也看看这个小提琴
回答by ickmund
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.
单选按钮没有innerhtml。您需要定位标签。如果它总是直接在单选按钮之后，请尝试类似radios[i].nextSibling.innerhtml.
