Javascript 当我对选中的框进行计数时，它加上一个框进行计数

我的web应用程序是关于预测体育比赛的。 我的页面显示了所有比赛，以及你可以从每一场比赛的结果中获得的分数（马德里=12分VS巴萨=15分）。 因此，用户从匹配中选中一个框，并为其选择正确的结果。 我希望每次用户选中一个框，向他显示他选中的框数

下面是我的Javascript，用于计算复选框：

    const updateCount = function() {
      var x = document.querySelectorAll(".square:checked").length;
      document.querySelector(".plus").innerHTML = x;
    };

这是HTML，其中将显示复选框的数量

<div class=" d-flex pt-2">
            <h3 class="typos">Matchs pronostiqués</h3>
            <h3 class="typos pts" style="font-weight: bold; padding-left: 5px;"><%= current_user.forecasts.where(confirmed: true, season_id: Season.last.id).count %>/50</h3>
            <span class="plus"></span>
          </div>

这是我的HTML，对于数据库中的每个匹配项，一个匹配项将以这种方式出现在前面

    <% @matches.each do |match| %>
          <% if Time.parse(match.kick_off) > Time.now && current_user.forecasts.find_by(match_id: match.id, confirmed: true).nil? && match.points_home.present? %>
          <% if match.sport == "football" %>
        <div class="d-flex justify-content-center mb-2 mt-2">
          <h4 class="typopo"><%= match.league %></h4>
        </div>
        <div class="d-flex justify-content-center mb-2 mt-2">
          <h3 class="tit"><%= DateTime.parse(match.kick_off).to_date%></h3><h3 class="typopo pl-2">-</h3>
          <h3 class="typopo pl-2"><%= match.kick_off.to_s.gsub("T", " ").split[1].gsub("+", " ").split[0]%></h3>
        </div>
        <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="<%= match.id %>">
          <div class="d-flex flex-column align-items-center col-4">
            <div class="row">
              <h3 class="typopo"><%= image_tag "#{match.team_home_logo_url}", width: 50 %></h3>
            </div>
            <div class="row text-align-center">
              <h3 class="tit"><%= match.team_home %></h3>
            </div>
          </div>
          <div class="d-flex flex-column justify-content-center">
            <p class="typopo text-center">VS</p>
            <div class="d-flex flex-row align-items-center col-4">
              <div class="displaysquares" data-id="<%= match.id %>">
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="1"></input>
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="NULL"></input>
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="2"></input>
              </div>
            </div>
          </div>

Time.now&¤t_user.forecast.find_by（match_id:match.id，confirm:true）。nil？&&match.points\u home.present？%%>
-
VS

---

有一个数据id。其目的是当用户选中一个复选框时，我可以获得比赛的id，以便为正确的比赛创建正确的预测。

我将委托，而不是使用内联事件处理程序

这里我数了数复选框——为什么你不想要一个选中的收音机的值

注意：我将所有匹配项包装在

…

document.getElementById（“匹配”）.addEventListener（“更改”，函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（“square”））{
常量父项=tgt.最近（“.displaysquares”）；
var x=parent.querySelectorAll（“.square:checked”）.length；
document.querySelector（“.plus”）.innerHTML+=parent.dataset.id+”：“+x+”
”；
}
})

甲级联赛
某个日期
-
一些绳子
球队标志
其他球队的球员
VS
联赛2
某个日期
-
一些绳子
球队标志
其他球队的球员
VS

您好，这个数据id的问题在于我无法获得比赛的id，然后创建预测。您的问题中根本没有提到数据id-相关性是什么？它出现在HTML代码“data id=”“``中，目的是当用户选中一个框时，它与特殊游戏的结果相关（“1”-“NULL”-“2”）. 所以我得到了他为比赛选择的结果（这有一个想法，我是从数据id中得到的）。希望现在更清楚，一点也不清楚。请单击编辑，然后单击

[]

代码段编辑器，然后粘贴与问题相关的呈现HTML。如果有多个匹配项，请粘贴2或3个匹配项。另外，您发布的html中class=“pts”没有任何内容。我尝试过，但不幸的是，它只计算第一行框，当我选中下面的框（下一个匹配项）时，它没有将其考虑在内。为了更加清晰，我将编辑我的HTML代码。我在你的第一个版本中用“文档”更改了“父级”，效果很好。非常感谢。

    <% @matches.each do |match| %>
          <% if Time.parse(match.kick_off) > Time.now && current_user.forecasts.find_by(match_id: match.id, confirmed: true).nil? && match.points_home.present? %>
          <% if match.sport == "football" %>
        <div class="d-flex justify-content-center mb-2 mt-2">
          <h4 class="typopo"><%= match.league %></h4>
        </div>
        <div class="d-flex justify-content-center mb-2 mt-2">
          <h3 class="tit"><%= DateTime.parse(match.kick_off).to_date%></h3><h3 class="typopo pl-2">-</h3>
          <h3 class="typopo pl-2"><%= match.kick_off.to_s.gsub("T", " ").split[1].gsub("+", " ").split[0]%></h3>
        </div>
        <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="<%= match.id %>">
          <div class="d-flex flex-column align-items-center col-4">
            <div class="row">
              <h3 class="typopo"><%= image_tag "#{match.team_home_logo_url}", width: 50 %></h3>
            </div>
            <div class="row text-align-center">
              <h3 class="tit"><%= match.team_home %></h3>
            </div>
          </div>
          <div class="d-flex flex-column justify-content-center">
            <p class="typopo text-center">VS</p>
            <div class="d-flex flex-row align-items-center col-4">
              <div class="displaysquares" data-id="<%= match.id %>">
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="1"></input>
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="NULL"></input>
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="2"></input>
              </div>
            </div>
          </div>