I have four tables and in each table I have multip

<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.

回答1:

Use document.querySelector();

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

EXAMPLE

回答2:

You can get a collection radio buttons using their name as a named property of the form, then loop over the collection to find the one that's checked, e.g.

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>

If you wish to use the query selector interface, then you can use:

function getSelected() {
  var radio = document.querySelector('input[name=foo]:checked');
  return radio? radio.value : '';
}

Note that you must check the returned value first, since if no radio is selected, then querySelector returns null, and attempting to access the value property of null will throw an error.

回答3:

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