Question

我是javascript的新手，我有以下javascript函数selectallrep.js：

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，但是我需要做什么才能使每个Select All只是该组的一部分？我在网上看到的每个例子都使用了一个表类。不幸的是我没有桌子我正在使用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;
        }
    }
}

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

javascript多个组选择全部

1 个答案: