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 三元< /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