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

这是我的桌子

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

关于javascript - 单击时选中了javascript复选框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36785836/

10-16 18:04