javascript - 使用复选框标记要删除的行

Question

我有这个收件箱或邮件，我需要使用复选框标记以进行多次删除。问题是，当我单击复选框时，由于标签内的 onclick，它总是转到方法 read()。我想要的只是简单的标记。请看下面的代码:

@foreach ($messages as $message)    
  <tr onclick="document.location='{{route('account.message.read', array($message->id))}}'">
     <td> <input type="checkbox" name="msg" value="{{$message->id}}"></td>
     <td><strong>{{Str::words($message->subject, 5, '...')}}</strong> {{Str::words($message->message, 20, '...')}}</td>
  </tr>
@endforeach

现在如何在不进入该方法的情况下标记每一行？顺便说一句，我是新手。

Answer 1

您只需将处理程序附加到checkbox 并使用stopPropagation从冒泡到树上，看下面的例子:

HTML

假设我们有带有 onclick 内联 javascript 的表格行，并且其中有 input:

<table>
  <tr onclick="return alert('Hai')">
    <td>
        <input type="checkbox" />Click Me
    </td>
  </tr>
<table>

这里是处理程序:

$('input').click(function(e){
  // normally if we removed this line of code
  // alert will getting called as checkbox is checked/unchecked
  // was inside table rows
  // but with this propagation, we disabled it 
  // from bubbling up into tree
  e.stopPropagation();
});

DEMO