select 所有选项 A 单选按钮 javascript
select all option A radio buttons with javascript
如果选择顶部的 4 星选项，我希望表格中的所有选项 4 星都得到 selected.if 选择顶部的 3 星选项，所有 3 星应该是 selected.i 尝试使用此代码但对我不起作用。
Javascript:
function valueChanged() {
if(document.getElementById("four").checked == true) {
document.getElementById("q14").checked = true;
document.getElementById("q24").checked = true;
document.getElementById("q34").checked = true;
document.getElementById("q44").checked = true;
document.getElementById("q54").checked = true;
}
else if(document.getElementById("three").checked == true) {
document.getElementById("q13").checked = true;
document.getElementById("q23").checked = true;
document.getElementById("q33").checked = true;
document.getElementById("q43").checked = true;
document.getElementById("q53").checked = true;
}
else if(document.getElementById("two").checked == true) {
document.getElementById("q12").checked = true;
document.getElementById("q22").checked = true;
document.getElementById("q32").checked = true;
document.getElementById("q42").checked = true;
document.getElementById("q52").checked = true;
}
else if(document.getElementById("one").checked == true) {
document.getElementById("q11").checked = true;
document.getElementById("q21").checked = true;
document.getElementById("q31").checked = true;
document.getElementById("q41").checked = true;
document.getElementById("q51").checked = true;
}
else{
return null;
}`
enter image description here
HTML:
4星
3星
2星
1星
<div class="container con">
<div class="row">
<div class="col-sm-8 col1" ><table cellpadding="13">
<tr><td>1.Technical Skills</td></tr>
<tr><td>2.Sincerity, Commitment, Regularity, and Punctuality</td></tr>
<tr><td>3.Ability to clarify doubts, and teaching with relevant examples</td></tr>
<tr><td>4.Accessibility of teachers for doubts and clarifications outside the class</td></tr>
<tr><td>5.Ability to command and control the class including evaluation / examination</td></tr>
</table>
</div>
<div class="col-sm-4 col2" align="center"><table class="table1"><tr ><td id="rate-area-1">
<input type="radio" id="q14" name="q1" value="4" onchange="valueChanged()"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q13" name="q1" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q12" name="q1" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q11" name="q1" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area-2">
<input type="radio" id="q24" name="q2" value="4" onchange="valueChanged()" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q23" name="q2" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q22" name="q2" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q21" name="q2" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q34" name="q3" value="4" onchange="valueChanged()" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q33" name="q3" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q32" name="q3" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q31" name="q3" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q44" name="q4" value="4" onchange="valueChanged()" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q43" name="q4" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q42" name="q4" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q41" name="q4" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q54" name="q5" value="4" onchange="valueChanged()" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q53" name="q5" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q52" name="q5" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q51" name="q5" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr></table>
请在此处javascript帮助我编写一些新代码
您显示的图片和您发布的代码以某种方式显示了两种不同的东西。添加输入元素的第一行并给它们 onchange="valueChanged()"（由于某种原因不是所有 4 星按钮，因为它目前是）并且它有效。
function valueChanged() {
if(document.getElementById("four").checked == true) {
document.getElementById("q14").checked = true;
document.getElementById("q24").checked = true;
document.getElementById("q34").checked = true;
document.getElementById("q44").checked = true;
document.getElementById("q54").checked = true;
}
else if(document.getElementById("three").checked == true) {
document.getElementById("q13").checked = true;
document.getElementById("q23").checked = true;
document.getElementById("q33").checked = true;
document.getElementById("q43").checked = true;
document.getElementById("q53").checked = true;
}
else if(document.getElementById("two").checked == true) {
document.getElementById("q12").checked = true;
document.getElementById("q22").checked = true;
document.getElementById("q32").checked = true;
document.getElementById("q42").checked = true;
document.getElementById("q52").checked = true;
}
else if(document.getElementById("one").checked == true) {
document.getElementById("q11").checked = true;
document.getElementById("q21").checked = true;
document.getElementById("q31").checked = true;
document.getElementById("q41").checked = true;
document.getElementById("q51").checked = true;
}
else{
return null;
}
}
<div class="col-sm-4 col2" align="center"><table class="table1"><tr ><td id="rate-area-1">
<input type="radio" id="four" name="q1" value="4" onchange="valueChanged()"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="three" name="q1" value="3" onchange="valueChanged()"/><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="two" name="q1" value="2" onchange="valueChanged()"/><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="one" name="q1" value="1" onchange="valueChanged()"/><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<div class="container con">
<div class="row">
<div class="col-sm-8 col1" ><table cellpadding="13">
<tr><td>1.Technical Skills</td></tr>
<tr><td>2.Sincerity, Commitment, Regularity, and Punctuality</td></tr>
<tr><td>3.Ability to clarify doubts, and teaching with relevant examples</td></tr>
<tr><td>4.Accessibility of teachers for doubts and clarifications outside the class</td></tr>
<tr><td>5.Ability to command and control the class including evaluation / examination</td></tr>
</table>
</div>
<div class="col-sm-4 col2" align="center"><table class="table1"><tr ><td id="rate-area-1">
<input type="radio" id="q14" name="q1" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q13" name="q1" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q12" name="q1" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q11" name="q1" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area-2">
<input type="radio" id="q24" name="q2" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q23" name="q2" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q22" name="q2" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q21" name="q2" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q34" name="q3" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q33" name="q3" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q32" name="q3" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q31" name="q3" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q44" name="q4" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q43" name="q4" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q42" name="q4" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q41" name="q4" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q54" name="q5" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q53" name="q5" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q52" name="q5" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q51" name="q5" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr></table>
话虽如此，您可能想考虑简化代码。给每个 x-star 评级一个 class，让顶部的单选按钮知道它连接到哪个收音机，你就不必写一个巨大的 if-else 声明。
使用事件委托会更优雅 - 检查点击目标在其容器中的索引，然后 select 其容器中该索引的所有 input，然后 check他们：
const table1 = document.querySelector('.table1');
table1.addEventListener('change', (e) => {
const { target } = e;
const { children } = target.parentElement;
if (!target.matches('#rate-area-1 input[type="radio"]')) return;
// Get the index of the changed input:
const index = Array.prototype.indexOf.call(children, target);
const selector = 'input:nth-child(' + (index + 1) + ')'
table1.querySelectorAll(selector)
.forEach(input => input.checked = true);
});
<table class="table1">
<tr>
<td id="rate-area-1">
<input type="radio" id="q14" name="q1" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q13" name="q1" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q12" name="q1" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q11" name="q1" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
<tr>
<td class="rate-area-2">
<input type="radio" id="q24" name="q2" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q23" name="q2" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q22" name="q2" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q21" name="q2" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
<tr>
<td class="rate-area">
<input type="radio" id="q34" name="q3" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q33" name="q3" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q32" name="q3" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q31" name="q3" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
<tr>
<td class="rate-area">
<input type="radio" id="q44" name="q4" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q43" name="q4" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q42" name="q4" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q41" name="q4" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
<tr>
<td class="rate-area">
<input type="radio" id="q54" name="q5" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q53" name="q5" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q52" name="q5" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q51" name="q5" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
</table>
如果选择顶部的 4 星选项，我希望表格中的所有选项 4 星都得到 selected.if 选择顶部的 3 星选项，所有 3 星应该是 selected.i 尝试使用此代码但对我不起作用。
Javascript:
function valueChanged() {
if(document.getElementById("four").checked == true) {
document.getElementById("q14").checked = true;
document.getElementById("q24").checked = true;
document.getElementById("q34").checked = true;
document.getElementById("q44").checked = true;
document.getElementById("q54").checked = true;
}
else if(document.getElementById("three").checked == true) {
document.getElementById("q13").checked = true;
document.getElementById("q23").checked = true;
document.getElementById("q33").checked = true;
document.getElementById("q43").checked = true;
document.getElementById("q53").checked = true;
}
else if(document.getElementById("two").checked == true) {
document.getElementById("q12").checked = true;
document.getElementById("q22").checked = true;
document.getElementById("q32").checked = true;
document.getElementById("q42").checked = true;
document.getElementById("q52").checked = true;
}
else if(document.getElementById("one").checked == true) {
document.getElementById("q11").checked = true;
document.getElementById("q21").checked = true;
document.getElementById("q31").checked = true;
document.getElementById("q41").checked = true;
document.getElementById("q51").checked = true;
}
else{
return null;
}`
enter image description here
HTML: 4星 3星 2星 1星
<div class="container con">
<div class="row">
<div class="col-sm-8 col1" ><table cellpadding="13">
<tr><td>1.Technical Skills</td></tr>
<tr><td>2.Sincerity, Commitment, Regularity, and Punctuality</td></tr>
<tr><td>3.Ability to clarify doubts, and teaching with relevant examples</td></tr>
<tr><td>4.Accessibility of teachers for doubts and clarifications outside the class</td></tr>
<tr><td>5.Ability to command and control the class including evaluation / examination</td></tr>
</table>
</div>
<div class="col-sm-4 col2" align="center"><table class="table1"><tr ><td id="rate-area-1">
<input type="radio" id="q14" name="q1" value="4" onchange="valueChanged()"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q13" name="q1" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q12" name="q1" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q11" name="q1" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area-2">
<input type="radio" id="q24" name="q2" value="4" onchange="valueChanged()" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q23" name="q2" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q22" name="q2" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q21" name="q2" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q34" name="q3" value="4" onchange="valueChanged()" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q33" name="q3" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q32" name="q3" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q31" name="q3" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q44" name="q4" value="4" onchange="valueChanged()" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q43" name="q4" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q42" name="q4" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q41" name="q4" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q54" name="q5" value="4" onchange="valueChanged()" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q53" name="q5" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q52" name="q5" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q51" name="q5" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr></table>
请在此处javascript帮助我编写一些新代码
您显示的图片和您发布的代码以某种方式显示了两种不同的东西。添加输入元素的第一行并给它们 onchange="valueChanged()"（由于某种原因不是所有 4 星按钮，因为它目前是）并且它有效。
function valueChanged() {
if(document.getElementById("four").checked == true) {
document.getElementById("q14").checked = true;
document.getElementById("q24").checked = true;
document.getElementById("q34").checked = true;
document.getElementById("q44").checked = true;
document.getElementById("q54").checked = true;
}
else if(document.getElementById("three").checked == true) {
document.getElementById("q13").checked = true;
document.getElementById("q23").checked = true;
document.getElementById("q33").checked = true;
document.getElementById("q43").checked = true;
document.getElementById("q53").checked = true;
}
else if(document.getElementById("two").checked == true) {
document.getElementById("q12").checked = true;
document.getElementById("q22").checked = true;
document.getElementById("q32").checked = true;
document.getElementById("q42").checked = true;
document.getElementById("q52").checked = true;
}
else if(document.getElementById("one").checked == true) {
document.getElementById("q11").checked = true;
document.getElementById("q21").checked = true;
document.getElementById("q31").checked = true;
document.getElementById("q41").checked = true;
document.getElementById("q51").checked = true;
}
else{
return null;
}
}
<div class="col-sm-4 col2" align="center"><table class="table1"><tr ><td id="rate-area-1">
<input type="radio" id="four" name="q1" value="4" onchange="valueChanged()"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="three" name="q1" value="3" onchange="valueChanged()"/><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="two" name="q1" value="2" onchange="valueChanged()"/><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="one" name="q1" value="1" onchange="valueChanged()"/><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<div class="container con">
<div class="row">
<div class="col-sm-8 col1" ><table cellpadding="13">
<tr><td>1.Technical Skills</td></tr>
<tr><td>2.Sincerity, Commitment, Regularity, and Punctuality</td></tr>
<tr><td>3.Ability to clarify doubts, and teaching with relevant examples</td></tr>
<tr><td>4.Accessibility of teachers for doubts and clarifications outside the class</td></tr>
<tr><td>5.Ability to command and control the class including evaluation / examination</td></tr>
</table>
</div>
<div class="col-sm-4 col2" align="center"><table class="table1"><tr ><td id="rate-area-1">
<input type="radio" id="q14" name="q1" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q13" name="q1" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q12" name="q1" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q11" name="q1" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area-2">
<input type="radio" id="q24" name="q2" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q23" name="q2" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q22" name="q2" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q21" name="q2" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q34" name="q3" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q33" name="q3" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q32" name="q3" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q31" name="q3" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q44" name="q4" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q43" name="q4" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q42" name="q4" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q41" name="q4" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr>
<tr ><td class="rate-area">
<input type="radio" id="q54" name="q5" value="4" /><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q53" name="q5" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q52" name="q5" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q51" name="q5" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td></tr></table>
话虽如此，您可能想考虑简化代码。给每个 x-star 评级一个 class，让顶部的单选按钮知道它连接到哪个收音机，你就不必写一个巨大的 if-else 声明。
使用事件委托会更优雅 - 检查点击目标在其容器中的索引，然后 select 其容器中该索引的所有 input，然后 check他们：
const table1 = document.querySelector('.table1');
table1.addEventListener('change', (e) => {
const { target } = e;
const { children } = target.parentElement;
if (!target.matches('#rate-area-1 input[type="radio"]')) return;
// Get the index of the changed input:
const index = Array.prototype.indexOf.call(children, target);
const selector = 'input:nth-child(' + (index + 1) + ')'
table1.querySelectorAll(selector)
.forEach(input => input.checked = true);
});
<table class="table1">
<tr>
<td id="rate-area-1">
<input type="radio" id="q14" name="q1" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q13" name="q1" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q12" name="q1" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q11" name="q1" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
<tr>
<td class="rate-area-2">
<input type="radio" id="q24" name="q2" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q23" name="q2" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q22" name="q2" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q21" name="q2" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
<tr>
<td class="rate-area">
<input type="radio" id="q34" name="q3" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q33" name="q3" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q32" name="q3" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q31" name="q3" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
<tr>
<td class="rate-area">
<input type="radio" id="q44" name="q4" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q43" name="q4" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q42" name="q4" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q41" name="q4" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
<tr>
<td class="rate-area">
<input type="radio" id="q54" name="q5" value="4"/><label for="4-star" title="Very Good">4 stars</label>
<input type="radio" id="q53" name="q5" value="3" /><label for="3-star" title="Good">3 stars</label>
<input type="radio" id="q52" name="q5" value="2" /><label for="2-star" title="Satisfactory">2 stars</label>
<input type="radio" id="q51" name="q5" value="1" /><label for="1-star" title="Unsatisfactory">1 star</label>
</td>
</tr>
</table>