samedi 28 mai 2022

How to get the value of a table field when checking and unchecking a checkbox

So, I have this html table, with a checkbox as the last column (id = reconciled), I also have an id field in the first column (id = aopayid) , how do I check the last column and get the first column value, I also want to uncheck and get the first column value - they must be as I click each checkbox and I need the check and uncheck to be separate as I will run a separate script for each.

I have found a few solutions, but they all seem to loop through the table and give the value of each that are checked, or unchecked. Hope that makes sense.

<table id="example" class="display" style="width:100%;display:none" >
            <thead>
                <tr>
                <th >AoID</th>
                <th>Merchant</th>
                <th >Reference</th>
                <th  >Date</th>
                <th style=" text-align: right">Amount</th>
                <th >Status</th>
                <th >Edit</th>     
                <th >Complete</th>     
                </tr>
            </thead>
            <tbody>
                <tr>
                <td name="aopayid" id="aopayid" ></td>
                <td></td>
                <td></td>
                <td><span class="date"><?php echo substr($transaction->created,0,10); ?></td>
                <td style=" text-align: right"><?php echo number_format($transaction->amount,2); ?></td>
                <td><span class="badge "></span></td>
                <td><input type="button" class="edit" name="edit" value="Edit" ></td>
                <td><input type="checkbox" class="reconciled" name="reconciled" id="reconciled" value = 'yes'  ></td>
            </tr>
          </tbody>
 </table>

The code that I have is as follows , but it does not give the value when unchecking

$(document).on("click", "#example .reconciled", function () {

 //Reference the Table.
  var grid = document.getElementById("example");
 
 //Reference the CheckBoxes in Table.
  var checkBoxes = grid.getElementsByTagName("INPUT");
  var message ;
  var checkedornot;

 //Loop through the CheckBoxes.
 for (var i = 0; i < checkBoxes.length; i++) {
     if (checkBoxes[i].checked) {
         var row = checkBoxes[i].parentNode.parentNode;
         message = row.cells[0].innerHTML;
         checkedornot = 'Yes';
     
     }
  }



 alert(message ); 


});



Aucun commentaire:

Enregistrer un commentaire