单击离开时选中的 JavaScript 复选框

javascript checkbox checked when clicked away

本文关键字:JavaScript 复选框 离开 单击      更新时间:2023-09-26

我有一个数据表,我试图在其中显示一个复选框,当单击任何行时,其复选框将被选中

这是我的桌子

<table class="bt-datatable table table-striped" id="bt-user-datatable">
    <thead>
    <tr>
      <th><input type="checkbox" name="select_all" value="1" id="bt-select-all"></th>
      <th class="text-left">name</th>
      <th class="text-left">gender</th>
      <th class="text-left">class</th>
    </tr>
    </thead>
    <tbody>
    <%
         @user.each do |user|
    %>
            <tr class="bt-users-row">
              <td class="text-left"><input type="checkbox" value="<%= user.id %>"></td>
              <td class="text-left"><%= user.name %></td>
              <td class="text-left"><%= user.gender %></td>
              <td class="text-left"><%= user.class %><div 
            </tr>
    <% end %>
    </tbody>
  </table>

在 JavaScript 中,我有

    $('.bt-users-row').on('click', function(){
            var checkBox = $(this).find('input[type="checkbox"]');
            if (checkBox.is(':checked')){
                checkBox.prop("checked", false);
            }
            else if (!checkBox.is(':checked')) {
                checkBox.prop("checked", true);
            }
        });

所以在这种情况下,我要做的是当我单击该行时,它会自动选中受人尊敬的复选框,但是,我遇到的问题是当我单击复选框时,它不会选中它

问题是,当选中复选框时,同时执行默认操作和行检查代码,从而否定操作

$('.bt-users-row').on('click', function(e) {
  if ($(e.target).is(':checkbox')) {
    return;
  }
  $(this).find('input[type="checkbox"]').prop('checked', function() {
    return !this.checked;
  });
});