How to get checked row values with jQuery?

Question

I have been trying to get a value of a hidden textbox which are model bind using razor. The table consists of 2 hidden input types for each row. I want to get value of the textbox where the id says purDate .

How do I do this.

Here's the table for references

<table id="accounts" class="ui celled selectable table">
<thead>
 <tr>
 <th>Acc No</th>
 <th>Purchased Date</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var item in Model.WithdrawelAccounts)
 {
  <tr>
  <td style="text-align:center">
   <input id="@item.ACC_AC_ID" type="checkbox" class="ui checkbox check" name="example" />
   <input id="accts" type="hidden" value="@item.ACC_NO_OF_AC_CURRENT" style="display:none" />
   </td>
    <td style="text-align:center">
        @item.ACC_PURCHASE_DATE.ToString("dd/MMM/yyy")
        <input class="pDate" id="purDate" type="hidden" name="purDate" value="@item.ACC_PURCHASE_DATE" style="display:none" />
    </td>
 </tr>
 }

 </tbody
</table>

Here's the they way I tried to retrieve the values

<script>

$('#frm_submit').click(function (event) {

var purDate = [];

 $.each($("input[type=checkbox]:checked").parents("td"), function () {
            noOfAcc.push($(this).find('input[type=hidden]').attr("value"));
            purDate.push($('#purDate').val());
            //purDate.push($(this).find("input[id='purDate']").text());
        });
});
 var purDate = [];
</script>

As you can see I have tried to get the value using id purDate but the result have duplicate values

The output on console.

purdate (2) ["2/1/2014 12:00:00 AM", "2/1/2014 12:00:00 AM"]

As you can see it has taken only the first <td> value in the loop according to what I think.

The actual result should be

purdate (2) ["2/1/2014 12:00:00 AM", "2/4/2019 12:00:00 AM"]

How to I correctly loop and get the values in the table according to my need. Help would be appreciated.

Answer 1

你能试试这个吗

document.formName.elements['purDate'].value

Answer 2

You are having an error in here.

$('#purDate').val()

It gets the first #purDate value. Your id should be unique. To fix this, you can put this in a class.

Remove the duplicate id and move it to class .

@foreach (var item in Model.WithdrawelAccounts)
 {
  <tr>
  <td style="text-align:center">
   <input id="@item.ACC_AC_ID" type="checkbox" class="ui checkbox check" name="example" />
   <!-- Remove the accts id-->
   <input class="accts" type="hidden" value="@item.ACC_NO_OF_AC_CURRENT" style="display:none" />
   </td>
    <td style="text-align:center">
        @item.ACC_PURCHASE_DATE.ToString("dd/MMM/yyy")
        <!-- Remove the purDate id and put in in a class-->
        <input class="pDate purDate" type="hidden" name="purDate" value="@item.ACC_PURCHASE_DATE" style="display:none" />
    </td>
 </tr>
 }

Then in your jQuery:

$.each($("input[type=checkbox]:checked").parents("td"), function () {

    //noOfAcc.push($(this).find('input[type=hidden]').attr("value"));
    //purDate.push($('#purDate').val());

    // This will get the closest class in selected checkbox
    noOfAcc.push($(this).closest('.accts').val());
    purDate.push($(this).closest('tr').find('.pDate').val());

    //purDate.push($(this).find("input[id='purDate']").text());
});