JQuery and MVC: Get Row(values) Based on CheckBox Selected

Question

I've got a table with row data. Each row has a checkbox that will flag that row for processing. The table is populated with the aid of a DisplayTemplate as can be seen in the below code. When the user clicks the "Process" button, the code should iterate the table and add all selected rows to an array that will be sent to a web service. I thought this would be a simple thing to find an example on, but this hasn't been the case.

This is the table:

<table id="hes" class="table-striped table-condensed table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>Detail Id</th>
                <th>Detail Reason Code</th>
                <th>Detail Status Code</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.HesViewModels != null)
            {
                @Html.DisplayFor(i => i.HesViewModels)
            }
        </tbody>

I'm using this JQuery code to get the selected row and can't figure out how to get the row and it's corresponding values into an array.

$('#process').click(function () {
            var x = $('#hes tr').find('input[type="checkbox"]:checked').each(function () {
               // GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY
            });
        });

EDIT - Here's what the rendered source looks like for each row:

<tr>
    <td><input data-val="true" data-val-required="The Process field is required." id="HesViewModels_0__Process" name="HesViewModels[0].Process" type="checkbox" value="true" /><input name="HesViewModels[0].Process" type="hidden" value="false" /></td>
    <td>500116</td>
    <td>0</td>
    <td>1</td>
</tr>

Shyju · Accepted Answer · 2015-11-30 17:57:48Z

4

$(function(){

  $("#process").click(function(e){
     e.preventDefault();

      var idArray=[]; 

     $("#hes").find('input[type="checkbox"]:checked').each(function (i,k) {

         var item =$(this);       

         //Read the Id of the selected checkbox item.

         idArray.push(item.attr("id"));

     }); 
     console.log(idArray);
     //idArray is an array which has the Id of the checked checkboxes
     //now you can send the idArray to your web service endpoint

  });

});

If you want to get any other attribute value other than the id, you may replace id the expression item.attr("id") with your custom attribute name.

Here is a working jsbin sample.

Edit : As per the comments, you want to send more data. It is not a good idea to send the markup of html row as it is(like you mentioned in the comment). It is best to get the required data you want and send it in format which the web service can easily understand. Having a web service end point which accepts the HTML string and parse it for some data is a bad idea !

So i suggest you to keep the data you want to send, in HTML 5 data attributes. You may update your razor code like

<tbody>
@if (Model.HesViewModels != null)
{
    foreach (var item in Model.HesViewModels)
    {
        <tr>
            <td>
                @Html.CheckBoxFor(s => item.Process, 
                                  new {data_detailid = item.DetailId,
                                       data_reasoncode = item.DetailRasonCode})
            </td>
            <td>@item.DetailId</td>
            <td>@item.DetailRasonCode</td>
        </tr>
    }
}
</tbody>

This will render the check box items with 2 data attributes, detailid and reasoncode

So in our jQuery code, We just need to read the data attribute values of the selected checkboxes.

$(function () {

    $("#yourProcessBtnId").click(function (e) {
        e.preventDefault();

        var itemsArray = [];     
        $("#hes").find('input[type="checkbox"]:checked').each(function (i, k) {

          var item = $(this);                     
          var row = { detailId:item.data("detailid"), reasonCode: item.data("reasoncode")} 
          itemsArray.push(row);

        });
        //you can send itemsArray now.
        console.log(itemsArray);

    });
});

itemsArray will be an array of object with properties detailId and reasonCode

edited Nov 30, 2015 at 17:57

answered Nov 30, 2015 at 17:04

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Big Daddy Over a year ago

This is helpful!. How do I get the other values in the row? Look at my edit. As you'll see, they don't have any attributes.

Shyju Over a year ago

What other values you specifically want ?

Big Daddy Over a year ago

I need the other <td>s --> <td>500116</td>, <td>0</td>, <td>1</td>

Shyju Over a year ago

You need the values in those tds.rite ?

Big Daddy Over a year ago

Yes and I was kind of hoping for a solution that would grab the entire row as a json object, so I'd end up with an array of objects :)

|

Andrei Olariu · Accepted Answer · 2015-11-30 17:43:38Z

You're iterating through the checkboxes so you could use the .parents() function, (between your .find() and .each(), https://api.jquery.com/parents/) to select the containing trs and then iterate through them. Something like:

$('#process').click(function () {

    $('#hes tr').find('input[type="checkbox"]:checked').parent('tr').each(function () {
    // GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY
    });
});

Alternatively, you could do something like this:

$('#process').click(function () {
    $('#hes tbody tr').each(function () {
        var $self = $(this);
        if ($self.find(':checkbox').is(':checked'))
        {
            // Here you must look for values within the row (give your tds different ids, or class names to be able to select them 

            var someValue = $self.find('td.someValue').text();
            // use the value to stick it into the array

        }
    });
});

You can stick the values into the array like in @Shyju's answer.

Collectives™ on Stack Overflow

JQuery and MVC: Get Row(values) Based on CheckBox Selected

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related