javascript - 选中复选框时如何激活行的链接

Question

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

我添加了 {{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 %}

Answer 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>