如何點擊帶有複選框的表格行,以及當到達最後一個表格行按鈕時選擇更改以取消選擇
P粉752826008
P粉752826008 2024-02-17 19:35:31
0
1
354

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

我試圖取得行的長度

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

P粉752826008
P粉752826008

全部回覆(1)
P粉245489391

有幾個問題。

這是一個工作版本,也可以處理點擊按鈕

我計算選取的複選框數量等於複選框總數。

我為 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
});
sssccc

Name Surname Gender Age
Cliff Deon Male 52
Dennis Van Zyl Male 25
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!