在表行中的更改復選框上運行時如何停止重疊單擊？

Question

我有第一列帶復選框的表。

我可以通過勾選復選框 select 行並在任何地方單擊行。

<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("change", "input[name=\"ids[]\"]", function(event) {
    event.stopPropagation();
    // change the colour of row.
});

表格行點擊事件：

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

當我單擊行上的切換時，復選框被選中和未選中工作。 但是我點擊復選框什么也沒有發生，因為這兩個事件都被觸發了，就像首先被更改勾選然后被行點擊自動取消選中。

我該如何解決這個問題？

Answer 1

將change事件改為click如下：

 $(document).on("click", "input[name=\"ids[]\"]", function(event) { event.stopPropagation(); // change the colour of row. }); $(document).on('click', 'form > table > tbody > tr', function() { $(this).find("input[name=\"ids[]\"]").trigger("click"); console.log('clicked on row') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class=".form"> <table class="table" border="1"> <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>