我有四个表，每个表中都有多个单选按钮，现在如何使用 javaScript 获取选定的单选按钮 [英] I have four tables and in each table I have multiple radio buttons now how can I get the selected radio button using javaScript

问题描述

<div class="table-responsive"><font style="font-size:large"><table class="table table-responsive table-striped"><头>1.导师在开始时就设定了课程目标</thead><tr><td><label class="label label-success"><input type="radio" id="radio" value="Poor" name="radio" style="width:20px" 勾选/><span class="lbl padding-8">差</span></td><td><label class="label label-success"><input type="radio" id="radio" value="Fair" name="radio" style="width:20px"/><span class="lbl padding-8">公平</span></td><td><label class="label label-success"><input type="radio" id="radio" value="Average" name="radio" style="width:20px"/><span class="lbl padding-8">平均值</span></td><td><label class="label label-success"><input type="radio" id="radio" value="Good" name="radio" style="width:20px"/><span class="lbl padding-8">好</span></td><td><label class="label label-success"><input type="radio" id="radio" value="VeryGood" name="radio" style="width:20px"/><span class="lbl padding-8">非常好</span></td><td><label class="label label-success"><input type="radio" id="radio" value="Excellent" name="radio" style="width:20px"/><span class="lbl padding-8">优秀</span></td></tr></tbody><table class="table table-responsive table-striped"><头>2.导师清楚地传达他/她的想法</thead><tr><td><label class="label label-success"><input type="radio" id="radio1" value="Poor" name="radio" style="width:20px"/><span class="lbl padding-8">差</span></td><td><label class="label label-success"><input type="radio" id="radio1" value="Fair" name="radio" style="width:20px"/><span class="lbl padding-8">公平</span></td><td><label class="label label-success"><input type="radio" id="radio1" value="Average" name="radio" style="width:20px"/><span class="lbl padding-8">平均值</span></td><td><label class="label label-success"><input type="radio" id="radio1" value="Good" name="radio" style="width:20px"/><span class="lbl padding-8">好</span></td><td><label class="label label-success"><input type="radio" id="radio1" value="VeryGood" name="radio" style="width:20px"/><span class="lbl padding-8">非常好</span></td><td><label class="label label-success"><input type="radio" id="radio1" value="Excellent" name="radio" style="width:20px"/><span class="lbl padding-8">优秀</span></td></tr></tbody><table class="table table-responsive table-striped"><头>3.他/她在讲座中鼓励讨论</thead><tr><td><label class="label label-success"><input type="radio" id="radio2" value="Poor" name="radio" style="width:20px"/><span class="lbl padding-8">差</span></td><td><label class="label label-success"><input type="radio" id="radio2" value="Fair" name="radio" style="width:20px"/><span class="lbl padding-8">公平</span></td><td><label class="label label-success"><input type="radio" id="radio2" value="Average" name="radio" style="width:20px"/><span class="lbl padding-8">平均值</span></td><td><label class="label label-success"><input type="radio" id="radio2" value="Good" name="radio" style="width:20px"/><span class="lbl padding-8">好</span></td><td><label class="label label-success"><input type="radio" id="radio2" value="VeryGood" name="radio" style="width:20px"/><span class="lbl padding-8">非常好</span></td><td><label class="label label-success"><input type="radio" id="radio2" value="Excellent" name="radio" style="width:20px"/><span class="lbl padding-8">优秀</span></td></tr></tbody><table class="table table-responsive table-striped"><头>4.他/她能胜任回答参与者的问题</thead><tr><td><label class="label label-success"><input type="radio" id="radio3" value="Poor" name="radio" style="width:20px"/><span class="lbl padding-8">差</span></td><td><label class="label label-success"><input type="radio" id="radio3" value="Fair" name="radio" style="width:20px"/><span class="lbl padding-8">公平</span></td><td><label class="label label-success"><input type="radio" id="radio3" value="Average" name="radio" style="width:20px"/><span class="lbl padding-8">平均值</span></td><td><label class="label label-success"><input type="radio" id="radio3" value="Good" name="radio" style="width:20px"/><span class="lbl padding-8">好</span></td><td><label class="label label-success"><input type="radio" id="radio3" value="VeryGood" name="radio" style="width:20px"/><span class="lbl padding-8">非常好</span></td><td><label class="label label-success"><input type="radio" id="radio3" value="Excellent" name="radio" style="width:20px"/><span class="lbl padding-8">优秀</span></td></tr></tbody><table class="table table-responsive table-striped"><thead class="header">5.导师综合评价</thead><tr><td><label class="label label-success"><input type="radio" id="radio4" value="Poor" name="radio" style="width:20px"/><span class="lbl padding-8">差</span></td><td><label class="label label-success"><input type="radio" id="radio4" value="Fair" name="radio" style="width:20px"/><span class="lbl padding-8">公平</span></td><td><label class="label label-success"><input type="radio" id="radio4" value="Average" name="radio" style="width:20px"/><span class="lbl padding-8">平均值</span></td><td><label class="label label-success"><input type="radio" id="radio4" value="Good" name="radio" style="width:20px"/><span class="lbl padding-8">好</span></td><td><label class="label label-success"><input type="radio" id="radio4" value="VeryGood" name="radio" style="width:20px"/><span class="lbl padding-8">非常好</span></td><td><label class="label label-success"><input type="radio" id="radio4" value="Excellent" name="radio" style="width:20px"/><span class="lbl padding-8">优秀</span></td></tr></tbody><table class="table table-responsive table-striped"><tr><td><input type="button" class="btn btn-primary" onclick="javaScript:feedback()" id="feedback" value="Submit"/></td></tr></tbody>

这是我的 javaScript.

函数反馈(){var s = document.getElementById('radio').value;警报；}

现在我正在使用警报检查选择了哪个按钮，但这不起作用有人可以帮助我哪里出错.单击按钮时，我想从所有表格中获取所有选定的按钮.在这里，我尝试将反馈页面放入我的应用程序中，其中每个问题都有五个选项，使每个选项都附加有单选按钮.

解决方案

使用 document.querySelector();

函数反馈(){var x =document.querySelector('input[name="radio"]:checked').value;警报(x)}

示例

<div id="tab_2_contents" class="tab_contents">
<div class="table-responsive">
<font style="font-size:large">
<table class="table table-responsive table-striped">
<thead>
1.The instructor set out the course objectives at the begining
</thead>
<tbody>
<tr>
<td>
<label class="label label-success">
<input type="radio" id="radio" value="Poor" name="radio" style="width:20px" checked/>
<span class="lbl padding-8">Poor</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio" value="Fair" name="radio" style="width:20px" />
<span class="lbl padding-8">Fair</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio" value="Average" name="radio" style="width:20px" />
<span class="lbl padding-8">Average</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio" value="Good" name="radio" style="width:20px" />
<span class="lbl padding-8">Good</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio" value="VeryGood" name="radio" style="width:20px" />
<span class="lbl padding-8">VeryGood</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio" value="Excellent" name="radio" style="width:20px" />
<span class="lbl padding-8">Excellent</span>
</label>
</td>
</tr>
</tbody>
</table>
<table class="table table-responsive table-striped">
<thead>
2.The instructor communicated his/her ideas clearly
</thead>
<tbody>
<tr>
<td>
<label class="label label-success">
<input type="radio" id="radio1" value="Poor" name="radio" style="width:20px" />
<span class="lbl padding-8">Poor</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio1" value="Fair" name="radio" style="width:20px" />
<span class="lbl padding-8">Fair</span>
</label>
</td>
<td>
 <label class="label label-success">
<input type="radio" id="radio1" value="Average" name="radio" style="width:20px" />
<span class="lbl padding-8">Average</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio1" value="Good" name="radio" style="width:20px" />
<span class="lbl padding-8">Good</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio1" value="VeryGood" name="radio" style="width:20px" />
<span class="lbl padding-8">VeryGood</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio1" value="Excellent" name="radio" style="width:20px" />
<span class="lbl padding-8">Excellent</span>
</label>
</td>
</tr>
</tbody>
</table>
<table class="table table-responsive table-striped">
<thead>
3.He/She encourages discussion during the lecture
</thead>
<tbody>
<tr>
<td>
<label class="label label-success">
<input type="radio" id="radio2" value="Poor" name="radio" style="width:20px" />
<span class="lbl padding-8">Poor</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio2" value="Fair" name="radio" style="width:20px" />
<span class="lbl padding-8">Fair</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio2" value="Average" name="radio" style="width:20px" />
<span class="lbl padding-8">Average</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio2" value="Good" name="radio" style="width:20px" />
<span class="lbl padding-8">Good</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio2" value="VeryGood" name="radio" style="width:20px" />
<span class="lbl padding-8">VeryGood</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio2" value="Excellent" name="radio" style="width:20px" />
<span class="lbl padding-8">Excellent</span>
</label>
</td>
</tr>
</tbody>
</table>
<table class="table table-responsive table-striped">
<thead>
4.He/She competently answered participant's questions
</thead>
<tbody>
<tr>
<td>
<label class="label label-success">
<input type="radio" id="radio3" value="Poor" name="radio" style="width:20px" />
<span class="lbl padding-8">Poor</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio3" value="Fair" name="radio" style="width:20px" />
<span class="lbl padding-8">Fair</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio3" value="Average" name="radio" style="width:20px" />
<span class="lbl padding-8">Average</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio3" value="Good" name="radio" style="width:20px" />
<span class="lbl padding-8">Good</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio3" value="VeryGood" name="radio" style="width:20px" />
<span class="lbl padding-8">VeryGood</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio3" value="Excellent" name="radio" style="width:20px" />
<span class="lbl padding-8">Excellent</span>
</label>
</td>
</tr>
</tbody>
</table>
<table class="table table-responsive table-striped">

<thead class="header">
5.Overall rating of the instructor

</thead>

<tbody>
<tr>
<td>
<label class="label label-success">
<input type="radio" id="radio4" value="Poor" name="radio" style="width:20px" />
<span class="lbl padding-8">Poor</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio4" value="Fair" name="radio" style="width:20px" />
<span class="lbl padding-8">Fair</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio4" value="Average" name="radio" style="width:20px" />
<span class="lbl padding-8">Average</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio4" value="Good" name="radio" style="width:20px" />
<span class="lbl padding-8">Good</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio4" value="VeryGood" name="radio" style="width:20px" />
<span class="lbl padding-8">VeryGood</span>
</label>
</td>
<td>
<label class="label label-success">
<input type="radio" id="radio4" value="Excellent" name="radio" style="width:20px" />
<span class="lbl padding-8">Excellent</span>
</label>
</td>
</tr>
</tbody>
</table>
<table class="table table-responsive table-striped">
<tbody>
<tr>
<td>
<input type="button" class="btn btn-primary" onclick="javaScript:feedback()" id="feedback" value="Submit"/>
</td>
</tr>
</tbody>
</table>
</font>
</div>

</div>

Here is my javaScript.

function feedback(){
var s = document.getElementById('radio').value;
alert(s);
}

for now I am checking which button is selected using alert but this is not working can someone help me where mistake. On click on button I would like to get all the selected buttons from all the table.Here I am trying to put feedback page into my application in which each question will have five choices to make each choice have radio buttons attach to it.

解决方案

Use document.querySelector();

function feedback(){
var x =document.querySelector('input[name="radio"]:checked').value;
alert(x)
}

EXAMPLE

这篇关于我有四个表，每个表中都有多个单选按钮，现在如何使用 javaScript 获取选定的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！