我有四个表,在每个表中我有多个单选按钮,现在如何使用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 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>
这是我的javaScript。
function feedback(){
var s = document.getElementById('radio').value;
alert(s);
}
现在我正在检查使用警报选择了哪个按钮,但这不起作用,有人可以帮助我出错的地方。单击按钮时,我想从所有表中获取所有选定的按钮。在这里,我尝试将反馈页面放入我的应用程序中,其中每个问题将有五个选择,以使每个选择都附加单选按钮。
使用 document.querySelector();
function feedback(){
var x =document.querySelector('input[name="radio"]:checked').value;
alert(x)
}
例
您可以使用集合名称作为窗体的命名属性来获取集合单选按钮,然后遍历集合以查找选中的集合,例如
function getSelected(radios) {
for (var i=0, iLen=radios.length; i<iLen; i++) {
if (radios[i].checked) return radios[i].value;
}
return '';
}
<form onclick="this.selectedRadioValue.value = getSelected(this.foo)">
1<input type="radio" name="foo" value="1">
2<input type="radio" name="foo" value="2">
3<input type="radio" name="foo" value="3">
<br>
Selected: <input type="text" name="selectedRadioValue">
<input type="reset">
</form>
如果您希望使用查询选择器接口,则可以使用:
function getSelected() {
var radio = document.querySelector('input[name=foo]:checked');
return radio? radio.value : '';
}
请注意,您必须首先检查返回的值,因为如果未选择无线电,则 querySelector 返回 null,并且尝试访问 null 的值属性将引发错误。
function feedback(){
var check = document.querySelector('input:radio[name="radio"]:checked').value;
alert(check);
}
相关文章:
- Javascript:无法获取变量中的单选按钮值
- 用于选择MVC3中单选按钮值的JavaScript
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 注入Javascript以选择具有指定值的所有单选按钮
- Javascript:单选按钮,并显示基于vaule的图像
- Javascript:单击单选按钮时显示图像
- 在Javascript中选择Dynamicly Created单选按钮组并显示内部文本
- Spring WebFlow2 Javascript只在第一个单选按钮上工作
- 数据切换=“;按钮”;在JavaScript中无法识别引导程序单选按钮
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- JavaScript:如何用变量填充单选按钮值和标签
- Javascript/Jquery将选择列表更改为单选按钮
- 表单验证上的彩色单选按钮-Javascript
- 带有单选按钮 JavaScript 的随机测验
- 保存状态单选按钮javascript html
- 验证信用卡号码和选中的单选按钮javascript
- 选中单选按钮javascript时显示相关内容
- 单选按钮javascript验证
- 需要帮助检查验证的单选按钮JavaScript