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

Question

I have table with first column with checkbox.

I can select row by ticking checkbox and click on row in everywhere.

<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>

Checkbox change event:

$(document).on("change", "input[name=\"ids[]\"]", function(event) {
    event.stopPropagation();
    // change the colour of row.
});

Table row click event:

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

When i click toggle on row, checkbox is checked and unchecked working. But i click on checkbox nothing is happen because both event is fired, like first ticked by change and then unchecked automatically by row click.

How can i fix this issue?

Answer 1

Change the change event to click as below:

 $(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>