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

我还使用三元< /p>

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