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

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

Answer 2

您显示的图片和发布的代码以某种方式显示了两种不同的内容。添加输入元素的第一行，并给它们onchange="valueChanged()"（由于某种原因，目前还不是所有的四星按钮），并且可以正常工作。

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语句。

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

2 个答案: