Bagaimana untuk mengklik pada baris jadual dengan kotak pilihan dan apabila butang baris jadual terakhir dicapai, pilihan berubah untuk nyahpilih

Question

Jadual saya mempunyai kotak pilihan dan butang di luar jadual untuk menogol daripada pemilihan kepada nyahpilihan, bagaimana saya boleh mengklik mana-mana pada baris jadual dan di mana saya boleh mendapatkan tanda kotak semak saya, saya akan dipilih satu demi satu dan apabila Mencapai baris jadual terakhir, baris butang saya perubahan daripada dipilih kepada dinyahpilih, saya berjaya mengklik pada baris jadual dan kotak semak ditandakan, di mana saya gagal adalah apabila saya mencapai baris jadual terakhir dan butang berubah daripada dipilih kepada dinyahpilih.

Saya cuba dapatkan panjang baris

$('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

Ada beberapa soalan.

Ini adalah versi berfungsi yang juga mengendalikan klik butang

Saya mengira bilangan kotak pilihan yang ditandakan sama dengan jumlah bilangan kotak pilihan.

Saya menambah ID pada tbody

Saya juga menggunakan 三元

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