使用复选框标记要删除的行答案

【问题标题】：Mark row for deleting using checkbox使用复选框标记要删除的行
【发布时间】：2015-10-22 03:05:56
【问题描述】：

我有这个收件箱或邮件，我需要使用复选框标记多个删除。问题是，当我单击复选框时，由于标签内的 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

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

【问题讨论】：

如果要选择多个元素，请从 checkbox 标记中删除该 onclick 参数。对于多次删除，创建另一个按钮并添加修改后的onclick 参数，删除所有标记的元素。
@CrakC 在我发布的代码中，复选框内没有 onclick 参数。我没听清楚对不起。我想标记每一行并一次删除所有标记的行。
好吧，我弄错了。但是，您为边界 tr 标签包含了一个 onclick 参数，这意味着其中的任何元素在单击时都会触发 onclick 事件。通过将onclick参数添加到位于checkbox旁边的div或span或p来尝试解决方法，例如，包含电子邮件的主题。
@CrackC 谢谢，您的解决方案有效。 Norlihazmey Ghazali 在此页面中提出了另一种解决方案，我发现它适合我的问题。

标签： javascript jquery laravel checkbox methods

【解决方案1】：

您只需将处理程序附加到checkbox 并使用stopPropagation 冒泡成树，请参见下面的示例：

HTML

假设我们有带有onclick inline 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

【讨论】：

谢谢这个解决方案效果很好。正是我想要的。

【解决方案2】：

您可以将 onclick 放在除复选框单元格之外的标签内

否则，您可以在捕获点击事件时调用实际的 onclick 函数并检查 x 是否大于 50px！

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

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

然后您可以在对象上设置自定义参数并使用 this.customPropertyName 调用它们以确定单击了哪一行！希望这会有所帮助

【讨论】：

谢谢。这会起作用，但我会继续重复将 onclick 放在每个中。我还有更多可以放在该行中，例如邮件的主题和发件人。
我编辑了我的答案。我认为上面的代码将通过在您的 html 或 JScript 中实现自定义属性并通过 javascript 而不是作为 HREF 设置您的 onclicks 来帮助提高页面的可伸缩性，但作为手头问题的一般答案@Norilihazmey 有最简单的答案你的问题
谢谢。你的答案可以工作，这很好。我同意你的观点，Norilihazmey 有简单的解决方案。