javascript 多个组全选

Question

我是 javascript 新手，我有以下名为 selectallrep.js 的 javascript 函数:

function toggle(source) {
  checkboxes = document.getElementsByName('report_id');
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
  }
}

我正在尝试获取元素名称“report_id”，它是我的 django 表单的一部分。有几组report_id，它们具有单独的for 循环。当前的方法是选择下面 django 表单中的所有内容:

<div class="container">

        <div class="col-md-4">
          <script src= "{% static '/search/selectallrep.js' %}" type="text/javascript"></script>
          {% if fingrouplist is not None %}
                      <h4><strong>Financial</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>

                              <ul>
                              {% for app in fingrouplist %}
                              <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                              {% endfor %}
                              </ul>
          {% endif %}
        </div>


        <div class="col-md-4">
            <div class = "row">
          {% if cagrouplist is not None %}
                          <h4><strong>Care Assure</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>


                                  <ul>
                                  {% for app in cagrouplist %}
                                  <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                                  {% endfor %}
                                  </ul>
          {% endif %}
                          </div>

                        <div class = "row">
          {% if pigrouplist is not None %}
          <h4><strong>Performance Improvement</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>

                                  <ul>
                                  {% for app in pigrouplist %}
                                  <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                                  {% endfor %}
                                  </ul>
          {% endif %}
                        </div>

                        <div class = "row">
          {% if scgrouplist is not None %}
                          <h4><strong>Supply Chain</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>

                                  <ul>
                                  {% for app in scgrouplist %}
                                  <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                                  {% endfor %}
                                  </ul>
          {% endif %}
                        </div>

                        <div class = "row">
          {% if dssgrouplist is not None %}
                          <h4><strong>DSS Monitoring</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>

                                  <ul>
                                  {% for app in dssgrouplist %}
                                  <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                                  {% endfor %}
                                  </ul>
          {% endif %}
                        </div>

                        <div class = "row">
          {% if othgrouplist is not None %}
                          <h4><strong>Other</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>

                                  <ul>
                                  {% for app in othgrouplist %}
                                  <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                                  {% endfor %}
                                  </ul>
          {% endif %}
        </div>
      </div>

        <div class="col-md-4">
          <div class = "row">
          {% if bhgrouplist is not None %}
                        <h4><strong>Behavioral Health</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>

                                <ul>
                                {% for app in bhgrouplist %}
                                <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                                {% endfor %}
                                </ul>
        {% endif %}
</div>
                        <div class="row">
        {% if cegrouplist is not None %}
        <h4><strong>Clinical Excellence</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>

                                <ul>
                                {% for app in cegrouplist %}
                                <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                                {% endfor %}
                                </ul>
        {% endif %}
                        </div>
                        <div class="row">
        {% if psggrouplist is not None %}
          <h4><strong>Physician Service Group</strong/></br></br><input type="checkbox" onClick="toggle(this)" /> Select All</h4>

                                <ul>
                                {% for app in psggrouplist %}
                                <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                                {% endfor %}
                                </ul>
        {% endif %}
      </div>
    </div>

我知道这是因为它们都有相同的元素 id，但是我需要做什么才能使每个全选仅属于该组的一部分？我在网上找到的每个示例都显示使用表类。不幸的是，我没有使用 div 的表格。

Answer 1

在不更改任何 html 标记的情况下，以下方法就足够了

function toggle(source) {
    var els = source.parentNode.parentNode.querySelectorAll('input[name=report_id]');    
    if (els && els.length>0) {
        for (var i=0; i<els.length; i++) {
            els[i].checked = source.checked;
        }
    }
}

还有其他 jQuery 方法可以做到这一点，例如使用 parentsUntil('.row') 等。但这是最直接的方法