Question

问题：

每个选项卡都有一个表（总共5个选项卡），每个表都由三行组成（一个表头和两个表数据）。

我希望执行一个JS脚本，该脚本仅扫描具有属性id的表行，然后检查该行内的单选按钮。如果未选择任何内容，则表行应通过向其添加类来更改颜色。

最小（工作）示例：

HTML

<table class="table table-striped table-borderless" id="survey">
    <thead class="text-center">
        <tr>
          <th scope="col"></th>
          <th scope="col">1</th>
          <th scope="col">2</th>
          <th scope="col">3</th>
          <th scope="col">4</th>
          <th scope="col">5</th>
        </tr>
    </thead>
    <tbody>
      <tr id="1">
        <td scope="row">Question 1</td>
        <td><input type="radio" name="1" id="1" value="1"></td>
        <td><input type="radio" name="1" id="1" value="2"></td>
        <td><input type="radio" name="1" id="1" value="3"></td>
        <td><input type="radio" name="1" id="1" value="4"></td>
        <td><input type="radio" name="1" id="1" value="5"></td>
      </tr>
      <tr id="2">
        <td scope="row">Question 2</td>
        <td><input type="radio" name="2" id="2" value="1"></td>
        <td><input type="radio" name="2" id="2" value="2"></td>
        <td><input type="radio" name="2" id="2" value="3"></td>
        <td><input type="radio" name="2" id="2" value="4"></td>
        <td><input type="radio" name="2" id="2" value="5"></td>
      </tr>
  </tbody>
</table>

JavaScript

当用户尝试切换选项卡时，该功能由HTML中的按钮调用。

validateForm() {
    var valid = true;
    var rows = Nodes.tab[this.currentTab].querySelectorAll('tr[id]');

    for (var i = 0; i < rows.length; i++) {

        var inputs = rows[i].querySelectorAll("input");

        for (var x = 0; x < inputs.length; x++) {

          // Add class to table row?

        }
    }

    // If valid then mark step with green color
    if (valid) {
      document.getElementsByClassName("step")[this.currentTab].classList.add("finish");
    }
    // Return the valid status
    return valid; 
}

所需的输出：

如果用户没有检查按钮组中的至少一个单选按钮，则将CSS类“错误”添加到该表行。

Answer 1

只需详细说明我关于利用浏览器的本机表单验证来编写更少代码的评论。

纯CSS和HTML解决方案：

<style>
  #form1:invalid ~ table #row1 {
    background-color: red;
  }
  #form2:invalid ~ table #row2 {
    background-color: red;
  }
</style>

<form id="form1"></form>
<form id="form2"></form>
<table class="table table-striped table-borderless" id="survey">
    <thead class="text-center">
      <!--...-->
    </thead>
    <tbody>
      <tr id="row1">
        <td scope="row">Question 1</td>
        <td><input type="radio" name="f1" value="1" required form="form1"></td>
        <td><input type="radio" name="f1" value="2" form="form1"></td>
        <td><input type="radio" name="f1" value="3" form="form1"></td>
        <td><input type="radio" name="f1" value="4" form="form1"></td>
        <td><input type="radio" name="f1" value="5" form="form1"></td>
      </tr>
      <tr id="row2">
        <td scope="row">Question 2</td>
        <td><input type="radio" name="f2" value="1" required form="form2"></td>
        <td><input type="radio" name="f2" value="2" form="form2"></td>
        <td><input type="radio" name="f2" value="3" form="form2"></td>
        <td><input type="radio" name="f2" value="4" form="form2"></td>
        <td><input type="radio" name="f2" value="5" form="form2"></td>
      </tr>
  </tbody>
</table>

如果您真的需要JavaScript来了解正在发生的事情，则可以调用它来确定无线电组是否具有值：

document.getElementById('form1').checkValidity()

如果该组中未选择任何广播，它将返回false。

如果未选中单选按钮，请突出显示表格行

1 个答案: