Javascript 如何在表格行中的更改复选框上运行时停止重叠单击？

我有第一列带有复选框的表

我可以选中“按勾选行”复选框，然后单击“无处不在”中的“行”

<form class=".form">
    <table class="table">
        <tbody>
            <tr data-id="1" >
                <td>
                <input class="magic-checkbox" type="checkbox" name="ids[]" id="radio_1" value="1">
                <label for="radio_1"></label>
                </td>
                <td>1</td>
            </tr>
            <tr data-id="2" >
                <td>
                <input class="magic-checkbox" type="checkbox" name="ids[]" id="radio_2" value="2">
                <label for="radio_2"></label>
                </td>
                <td>2</td>
            </tr>
        </tbody>
    </table>
</form>

表行单击事件：

$(document).on('click', '.form > table > tbody > tr', function() {
    $(this).find("input[name=\"ids[]\"]").trigger("click");
});

当我单击“切换行”时，复选框处于选中状态，且未选中状态。 但我单击复选框“什么也不发生”，因为这两个事件都被触发，比如首先通过更改勾选，然后通过行单击自动取消选中

---

如何解决此问题？

将

更改
事件更改为
单击
，如下所示：


$（文档）。在（“单击”，“输入[name=\”id[]\“]”上，函数（事件）{
event.stopPropagation（）；
//改变行的颜色。
});
$（文档）。在（'click'，'form>table>tbody>tr'，function（）上{
$（this）.find（“输入[name=\”ids[]\“]”）。触发器（“单击”）；
console.log（'单击行'）
});

1.
2.
您可以在复选框事件处理程序中停止传播；您可以检查事件是否源自行处理程序中的复选框；或者，您可以使用行处理程序并扔掉复选框一。使用
event.stopPropagation（）
$（文档）。在（“change”、“.checkbox”上，函数（event）{event.stopPropagation（）；//更改行的颜色。}）它不起作用。请给我们一个代码示例和一段代码html@AksJacoves描述已更新。。。
$(document).on('click', '.form > table > tbody > tr', function() {
    $(this).find("input[name=\"ids[]\"]").trigger("click");
});