So klicken Sie auf eine Tabellenzeile mit Kontrollkästchen und wenn die Schaltfläche für die letzte Tabellenzeile erreicht wird, ändert sich die Auswahl in „Abwählen'.

Question

Meine Tabelle verfügt über Kontrollkästchen und Schaltflächen außerhalb der Tabelle, um von der Auswahl zur Abwahl umzuschalten. Wie klicke ich irgendwo auf die Tabellenzeilen und wo habe ich meine Kontrollkästchen aktiviert? Ich werde einzeln ausgewählt und beim Erreichen der letzten Tabellenzeile meine Schaltfläche Wenn die Änderung von „ausgewählt“ in „abgewählt“ wechselt, ist es mir gelungen, auf die Tabellenzeile zu klicken und das Kontrollkästchen zu aktivieren. Mein Fehler war, als ich die letzte Tabellenzeile erreichte und die Schaltfläche von „ausgewählt“ in „abgewählt“ wechselte.

Ich versuche, die Länge der Reihe zu ermitteln

$('tr').click(function(event) {
  var $target = $(event.target);
  if (!$target.is('input:checkbox')) {
    var select_chk = document.getElementById("button1");
    $(this).find('input:checkbox').each(function() {
      if ((this.checked)) {
        this.checked = false;
        button.value = "Unselect"
      } else {
        this.checked = true;
        button.value = "Select"
      }
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="check" value="Select" />
<table>
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Surname</th>
      <th>Gender</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Cliff</td>
      <td>Deon</td>
      <td>Male</td>
      <td>52</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>Dennis</td>
      <td>Van Zyl</td>
      <td>Male</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Answer 1

有几个问题。

这是一个工作版本，还可以处理单击按钮

我计算选中的复选框数量等于复选框总数。

我向 tbody 添加了 ID

我还使用三元

const $select_chk = $("#check");
const $table = $("#tbl")
const $checks = $table.find('input:checkbox')
const checkLength = $checks.length;
$table.on("click","tr", function(e) {
  if (!e.target.matches("[type=checkbox]")) { // if not a checkbox
    $(this).find("input:checkbox").click()    // click it anyway
  }  
  $select_chk.val(checkLength === $table.find('input:checkbox:checked').length ? "Unselect" : "Select");
});
$select_chk.on("click", function() { // we need function to get "this"
  const chk = this.value === "Select"; // check if text is select
  $checks.each(function() {
    this.checked = chk;
  });
  $select_chk.val(chk ? "Unselect" : "Select"); // toggle the text
});

	Name	Surname	Gender	Age
	Cliff	Deon	Male	52
	Dennis	Van Zyl	Male	25