how to get the value of a specific checkbox in Asp.net mvc using Jquery

Question

I have a table on an ASP.NET MVC system that each record has a checkbox, here’s the code below the view:

<table class="table table-hover table-striped" id="tabelaProdutos">
<thead>
    <tr>
        <th>Tipo de Produto</th>
        <th>Cód. Categoria</th>
        <th>Produto</th>
        <th>Ativado</th>
    </tr>
</thead>
<tbody>
    @foreach(var item in Model.ListaProdutos)
    {
        <tr>
            <td>@item.Tipo</td>
            <td align="right">@item.Categoria</td>
            <td>@item.Descricao</td>
            <td align="justify" onclick="AtivarProduto(@item.ID)">@Html.CheckBoxFor(model => item.Ativo)</td>
        </tr>
    }
</tbody>

How can I get the checkbox value of the item I just clicked on to be used for other purposes?

Answer 1

you can add a class to your CheckBox, then use it as selector.

@Html.CheckBoxFor(model => item.Ativo, new { @class = "ckAtivo" })

and in jQuery do the following.:

$("#tabelaTiposCartao").on("click", ".ckAtivo", function () {
    console.log(this.value);
});

the this.value will be the value of the checkbox. but I believe that this approach does what you want but will not solve your problem.

SUGGESTIONS

First point would be as to the use of foreach to build your table, by doing so, Razor is lost when assigning an id and a name to inpus,, then possibly you will not receive the data when you send them back to the server.

then you have two options, use a for or the nuget BeginCollectionItem

using a for:

@for(var i = 0; i < Model.ListaProdutos.Count; i++)
{
    <tr>
        <td>@Model.ListaProdutos[i].Tipo</td>
        <td align="right">@Model.ListaProdutos[i].Categoria</td>
        <td>@Model.ListaProdutos[i].Descricao</td>
        <td align="justify" onclick="AtivarProduto(@item.ID)">@Html.CheckBoxFor(model => Model.ListaProdutos[i].Ativo)</td>
    </tr>
}

but to use this approach, its ListaProdutos needs to be a concrete guy like a Array<T> or a List<T> and not an interface like IEnumerable<T>, if this is your case, your only option will be the aforementioned nuget package.

using the BeginCollectionItem:

using(Html.BeginCollectionItem("ListaProdutos"))
{
    <tr>
        <td>@Html.DisplayFor(model => model.Tipo)</td>
        <td align="right">@Html.DisplayFor(model => model.Categoria)</td>
        <td>@Html.DisplayFor(model => model.Descricao)</td>
        <td align="justify" onclick="AtivarProduto(@model.ID)">@Html.CheckBoxFor(model => model.Ativo)</td>
    </tr>
}

Now by the value of CheckBox, he’ll get the value of the property Ativo, that is to say true or false, but if you’re interested in ID, you will need to store it somewhere, for example in a Hidden.

And I would apply a class on the line, so that I could take it in Java and use the line as a scope for my future functions.

using(Html.BeginCollectionItem("ListaProdutos"))
{
    <tr class="trProduto">
        <td>@Html.DisplayFor(model => model.Tipo)</td>
        <td align="right">@Html.DisplayFor(model => model.Categoria)</td>
        <td>@Html.DisplayFor(model => model.Descricao)</td>
        <td align="justify">
            @Html.HiddenFor(model => model.ID)
            @Html.CheckBoxFor(model => model.Ativo)
        </td>
    </tr>
}

now follow the script:

var Produto = new Produto(container) {
    var that = this;
    this.dom = {};
    this.dom.linha = container;
    this.dom.celulas = this.dom.linha.querySelectorAll("td");
    this.dom.id = this.dom.linha.querySelector("[id$=ID]");
    this.dom.ativo = this.dom.linha.querySelector("[id$=Ativo]");

    this.dom.ativo.addEventListener("click", function () {
        that.onAtivoClick();
    });

    this.dom.celulas[3].addEventListener("click", function () {
        that.onCelula4Click();
    });
}

Produto.prototype.onAtivoClick = function () {
    console.log(this.dom.id.value); 
}

Produto.prototype.onCelula4Click = function () {
    AtivarProduto(this.dom.id.value);
}

var containers = document.querySelectorAll(".trProduto");
[].forEach.call(produtos, function (container, indice) {
    var produto = new Produto(container);   
});

in the above script, it selects all lines with the class .trProduto then for each line it looks for the inputs whose id ends with ID andAtivo.

But I took the liberty of creating a "Class" to help delimit a scope for each line, here called product.

if you need access to other data, such as Tipo, Categoria or Descricao, then create a HiddenFor for them too and search for them within the object Produto, an alternative is to take the property textContent of this.dom.celulas[i], where i will be 0, 1 or 2.