验证多个复选框答案

【问题标题】：Validate multiple checkboxes验证多个复选框
【发布时间】：2021-01-17 15:28:07
【问题描述】：

如果选中的复选框少于 10 个，我有一个脚本来显示警报但我无法让它工作。

我已经查看了许多其他类似的帖子，但我看不出有什么问题。

这与我的最相似，但我看不出如何实施他们的建议：

How to validate a form with multiple checkboxes to have atleast one checked

完整代码在这里：

脚本：

function validate() {
  var checked = 0;
  //Reference the Table.
  var chks = document.getElementById("remember");

  //Loop and count the number of checked CheckBoxes.
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].checked) {
      checked++;
    }
  }

  if (checked > 9) {
    return true;
  }
  else {
    alert("Dont you need 10 players?");
    return false;
  }
};

HTML（在烧瓶中运行）

<section class="projects-section bg-light" id="projects">
  <div class="container">
    <!-- Featured Project Row-->
    <div class="row align-items-center no-gutters mb-4 mb-lg-5">
      <div class="col-xl-4 col-lg-5">
        <div class="featured-text text-center text-center">
          <form class="text-black-50 mx-auto mt-2 mb-5" method="POST" action="/">
            <table class="mx-auto text-lg-left" style="width: 40%">
              <colgroup>
                <col span="1" style="width: 10%;">
                <col span="1" style="width: 30%;">
              </colgroup>

              {% for name in player_names %}
              <tr>
                <td><input type=checkbox name="available_players" id="remember" value="{{ name }}"></td>
                <td>{{ name }}</td>
              </tr>
              {% endfor %}
              <tr>
                <td><input type=checkbox name="output_checked" value="Yes"></td>
                <td>Admin Only</td>
              </tr>
            </table>
            <input class="btn btn-primary js-scroll-trigger" type="submit">
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

具有相同id 的多个元素是无效的HTML，并且无法可靠地工作，从而破坏了您的JavaScript；改用类名。

标签： javascript checkbox

【解决方案1】：

document.getElementById 总是只给你一个元素，但你把它称为一个集合。为了获得复选框的集合，您需要为它们提供所有相同的类名，然后像这样编写代码：

var chks = document.getElementsByClassName("your_class_name");

【讨论】：

【解决方案2】：

我发现我的部分问题似乎是我在 script.js 文件中的代码不在 jquery 结束标记内。第二部分是 id 可能不那么可靠。我没有使用类，而是改为使用名称作为将验证应用于已定义组的便捷方式。

var chks = $("input[name='available_players']:checked").length;

https://github.com/bignellrp/footyapp/blob/main/static/scripts.js

【讨论】：