Отметить строку для удаления с помощью флажка

Question

У меня есть этот почтовый ящик или письма, которые мне нужно отметить, используя флажок для нескольких удалений. Проблема в том, что когда я нажимаю флажок, он всегда переходит к методу read() из-за onclick внутри тега. Все, что я хочу, это простая маркировка. См. Код ниже:

@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 инлайн яваскрипт и внутри него есть 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

Answer 2

можно поставить OnClick внутри тегов, исключая CheckBox ячейки

иначе вы могли бы назвать фактическую OnClick функцию во время записи события щелчка и убедитесь, что х больше, чем позволяет сказать 50px!

<script type="text/javascript"> 
 
document.getElementById('emailRow1').addEventListener("click",function(e){ 
 
\t var x=e.pageX-this.offsetLeft; 
 
\t if(x>50){ 
 
\t \t rowClicked(); 
 
\t } 
 
\t },true); 
 
</script>

<table><tbody><tr id='emailRow1'><td style="width:50px;">This area wont trigger onclick</td><td>I trigger onclick</td><td>i trigger onclick</td>

Затем вы можете установить пользовательские параметры вашего объекта и вызывать их с помощью this.customPropertyName, чтобы определить, какая строка была нажата! надеюсь, что это помогает