如何點擊帶有複選框的表格行，以及當到達最後一個表格行按鈕時選擇更改以取消選擇

Question

我的表格在表格外側有複選框和按鈕，可以從選擇切換到取消選擇，如何單擊表格行上的任意位置以及我的複選框勾選我將被一一選擇的位置以及何時到達最後一個表格行我的按鈕從選擇更改為取消選擇，我確實設法單擊表格行和復選框勾選，我失敗的是當我到達最後一個表格行並且按鈕從選擇更改為取消選擇時。

我試圖取得行的長度

$('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
});

sssccc


  

    

      

      
Name
      
Surname
      
Gender
      
Age
    
  
  

    

      

      
Cliff
      
Deon
      
Male
      
52
    
    

      

      
Dennis
      
Van Zyl
      
Male
      
25