CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxfind
tcode
tcode

Reputation: 5105

Find Checkbox in HTML Table Using JQuery Find Method

I have a HTML table which has the following structure:

<table id="myTable">
  <tr>
     <td><input type="text" name="FullName" value="Tom" /></td>
     <td><input type="checkbox" name="isActive" /></td>
     <td><a href="javascript:void(0);" class="edit">Edit</a>
  </tr>
</table>

When the user clicks the 'edit' link, a Javascript function is called (see below). In this function I need to get the data from the table, i.e., FullName and whether or not isActive has been checked.

 $("#namedTutors").on('click', '.editTutor', function () {
    var tr = $(this).closest("tr");
    var fullName = tr.find("input[name=FullName]").val();
});

I can get the FullName easy enough, but I'm having difficulties retrieving the data to see if isActive has been checked/ticked or not.

Could someone please help.

Thanks.

Upvotes: 2

Views: 78

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could select the ckeckbox input by name [name=isActive] then use the .is(':checked') to check whether the ckeckbox is checked or not, like:

$("#namedTutors").on('click', '.editTutor', function() {
  var tr = $(this).closest("tr");
  var fullName = tr.find("input[name=FullName]").val();
  var isActive = tr.find("input[name=isActive]").is(':checked');
  
  console.log( isActive ); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="namedTutors">
  <tr>
    <td><input type="text" name="FullName" value="Tom" /></td>
    <td><input type="checkbox" name="isActive" /></td>
    <td><a href="javascript:void(0);" class="editTutor">Edit</a>
  </tr>
</table>

Upvotes: 2

heraphim
heraphim

Reputation: 346

if(tr.find('input[name="isActive"]:checked').length) {
     console.log('it is checked');
}

Upvotes: 2

Related Questions