选择所有选项 A 带有 javascript 的单选按钮

Question

如果选择了顶部的 4 星选项，我希望表单中的所有选项 4 星都被选中。如果从顶部选择了选项 3 星，则应选择所有 3 星。我尝试使用此代码但对我不起作用。

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 不熟悉的代码

Answer 1

使用事件委托会更优雅 - 检查单击目标在其容器中的索引，然后选择其容器内该索引的所有inputs，然后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>

Answer 2

您展示的图片和您发布的代码以某种方式展示了两种不同的东西。添加输入元素的第一行并给它们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 星评级一个类别，让顶部的单选按钮知道它连接到哪些收音机，您就不必写一个巨大的 if-else 声明。