jquery 如何单击具有复选框的表行以及当您到达最后一个表行按钮时选择更改为取消选择

9nvpjoqh 于 2023-03-07 发布在 jQuery

关注(0)|答案(2)|浏览(99)

我有一个表，表外有复选框和按钮，将从选择切换到取消选择，我如何点击表行上的任何地方和我的复选框勾选关于我将被逐个选中的位置，当它到达最后一个表行时，我的按钮从选择更改为取消选择，我设法点击表行和复选框勾选，我失败的是当我到达最后一个表行时，按钮从选择变为取消选择。
我已经试过求行的长度

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

jquery

来源：https://stackoverflow.com/questions/75517768/how-i-click-a-table-row-that-have-a-check-box-and-when-you-reaches-the-last-tabl

2条答案

按热度按时间

kjthegm61#

有几个问题。
这是一个工作版本，也处理点击按钮
我数出的选中的复选框数等于复选框总数。
我在tbody上加了个ID
我还使用ternaries

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
});

<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 id="tbl">
    <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>

赞(0）回复(0）举报 2023-03-07

hmae6n7t2#

//button click
$('#check').click(function(e) {
    if($(this).val()=='Select'){
        $('td input:checkbox').prop('checked',true);
        $(this).val('Unselect');
    }else{
         $('td input:checkbox').prop('checked',false);
         $(this).val('Select');
    }
});

//checkbox change
var $checkboxes = $('td input[type="checkbox"]');      
$checkboxes.change(function(){
    var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
    if(countCheckedCheckboxes==$('td input[type="checkbox"]').length)
    {
        $('#check').val('Unselect');
    }
    else{
         $('#check').val('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 id="tbl">
    <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>

赞(0）回复(0）举报 2023-03-07

我来回答

jquery 如何单击具有复选框的表行以及当您到达最后一个表行按钮时选择更改为取消选择

2条答案

相关问题

热门标签

最新问答