选中复选框时如何激活行的链接答案

【问题标题】：How to activate links for a row when checkbox is checked选中复选框时如何激活行的链接
【发布时间】：2018-03-28 11:12:37
【问题描述】：

更新和删除链接适用于表中的每一行。我希望在单击特定行的复选框时激活每一行的链接。有谁知道该怎么做？

我添加了{{forloop.counter}}，现在它正在生成一个新的 id，但所有的 id 仍然链接到第一行的链接。每行都有自己的链接，当我单击该行的复选框时，需要激活这些链接。

function toggleLink(checkBox) {
  var link1 = document.getElementById("agreeLink1");
  var link2 = document.getElementById("agreeLink2");
  var link3 = document.getElementById("agreeLink3");
  if (checkBox.checked) {
    link1.style.display = "inline";
    link2.style.display = "inline";
    link3.style.display = "inline";
  } else {
    link1.style.display = "none";
    link2.style.display = "none";
    link3.style.display = "none";
  }
}

<!-- language: lang-html -->
{% for catalog in object_list %} 
    <div class="container">
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>
              <form>
                <p><input type="checkbox" id="agreeCheckbox{{forloop.counter}}" name="agreeCheckbox" value="{{catalog.id}}" onchange="toggleLink(this);"></p>
              </form>
            </td>
            <td>{{ catalog.DatasetName }}</td>
            <td>{{ catalog.Type }}</td>
            <td>{{ catalog.Classification }}</td>
            <td>{{ catalog.OriginalSource }}</td>
            <td>{{ catalog.OriginalOwner }}</td>
            <td>{{ catalog.YearOfOrigin }}</td>
          </tr>
        </tbody>
      </table>
    </div>


    <div class="card-footer text-center text-muted">
      <a href="{% url 'catalog_edit' catalog.pk %}" id="agreeLink1" style="display:none;">Update</a> |
      <a href="{% url 'catalog_delete' catalog.pk %}" id="agreeLink2" style="display:none;">Delete</a> |
      <a href="{% url 'export_to_xml' %}" id="agreeLink3" style="display:none;">Export to XML</a>
    </div>
{% endfor %}

【问题讨论】：

如您所见，cmets 中的代码绝对不可读。如果您想添加更多信息，请使用您的问题下方的edit 按钮。在这种情况下，我已经为您完成了。

标签： javascript jquery django html

【解决方案1】：

尝试，像这样添加 onclick 并将链接分配给“thisLink”变量；

  <tr onclick="thisLink= {{catalog.link}}">
    <td>{{ catalog.DatasetName }}</td>
    <td>{{ catalog.Type }}</td>
    <td>{{ catalog.Classification }}</td>
    <td>{{ catalog.OriginalSource }}</td>
    <td>{{ catalog.OriginalOwner }}</td>
    <td>{{ catalog.YearOfOrigin }}</td>
  </tr>

【讨论】：