ASP.NET MVC - Get Checkbox without ID

Question

I have this code that creates a Table that has checkboxes in it and my checkboxes have no ID, i just want them to give me the name of the current person on the row when they are checked or unchecked and I am trying to do this with a OnChecked function and it isn't working.

This is my code:

 <table id="table" class="table table-bordered table-responsive table-hover table-bordered">

                                        <tr>

                                            <th align="center">Nome</th>
                                            <th align="center">Envia Mensagem</th>
                                            <th align="center">Envia Emails</th>
                                            <th align="center">Remover</th>
                                        </tr>
                                        @foreach (var esp in ViewBag.Json1)
                                        {
                                            <tr>


                                                <td>@esp.Nome</td>
                                                @if (@esp.NotificacaoEmail == "True")
                                                {

                                                    <td align="center"><input class="minimal" onclick="FillBooks(CURRENT LINE NAME);" type="checkbox" checked="checked"></td>
                                                }
                                                else
                                                {
                                                    <td align="center"><input class="minimal" type="checkbox"></td>
                                                }
                                                @if (@esp.NotificacaoAlerta == "True")
                                                {
                                                    <td align="center"><input class="minimal" type="checkbox" checked="checked"></td>
                                                }
                                                else
                                                {
                                                    <td align="center"><input class="minimal" type="checkbox"></td>
                                                }
                                                <td>
                                                    <button type="button" class="btn btn-block btn-danger">Remover</button>
                                                </td>

                                            </tr>
                                        }
                                    </table>

This is my Javascript:

 function myFunction(val) {
        alert(val);

    }

I don't get the alert when I change the Checkbox to true or false and I don't know why, can someone help me with this?

Answer 1

You can apply an onchange listener to all the checkboxes in the table and find out if it is checked or unchecked like this:

$("#table").on("change", "input[type=checkbox]", function () {
    if ($(this).is(":checked")) {
        // This checkbox was just checked
    } else {
        // This checkbox was just unchecked
    }
});

Working snippet below:

$("#table").on("change", "input[type=checkbox]", function () {
    var name = $(this).parents("tr").children().first().text();
    if ($(this).is(":checked")) {
        // This checkbox was just checked
        alert(name + " is checked");
    } else {
        // This checkbox was just unchecked
        alert(name + " is unchecked");
    }
});

for (var i = 0; i < 5; i++)
  $("#table").append("<tr><td>Name " + (i + 1) + "</td><td><input type=\"checkbox\" /></td></tr>")
  
 setTimeout(function () {
   for (var i = 5; i < 10; i++)
    $("#table").append("<tr><td>Name " + (i + 1) + "</td><td><input type=\"checkbox\" /></td></tr>")
 }, 5000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table"></table>

Answer 2

Get checkbox in jQuery like:

let checkboxes = $("input[type='checkbox']");
//you can debug after like 
console.log(checkboxes);

so in Javascript you can have checkbox like:

let checkboxes = document.querySelectorAll("input[type='checkbox']");
// to debug 
console.log(checkboxes);

I hope it's help you