looping a html table with inputs to get values - html

Question

I have a table that looks like this
<table id="tableScanItems" class="table">
<th>Scan Item</th>
<th>Inactive</th>
<tr>
<td><input type='text' id='input1' class='form-control'/></td>
<td><input type='checkbox' id='checkbox1' class='form-control'/></td>
</tr>
<tr>
<td><input type='text' id='input2' class='form-control'/></td>
<td><input type='checkbox' id='checkbox2' class='form-control'/></td>
</tr>
<tr>
<td><input type='text' id='input3' class='form-control'/></td>
<td><input type='checkbox' id='checkbox3' class='form-control'/></td>
</tr>
</table>
On a button click I have this jQuery that runs.
$("#tableScanItems tr").each(function (){
$(this).closest('tr').find("input").each(function() {
...get the values for each row and do stuff
});
});
I need to loop the html table to get the values of the input type=text and the input type=checkbox
The JS does loop properly and gets the input type=text values but not the input type=checkbox values. Do I need to specify a different parameter in the .each to see the value of checkbox?
Ryan
EDIT
If I do this I cannot see the values of the user inputs.
$(this).closest('tr').find("input").each(function() {
alert(this.value)
});

Answer 1

You can loop like below. You need to treat checkboxes differently to get their values:
$("#tableScanItems tr").each(function (){
$(this).closest('tr').find("input").each(function() {
var elem = $(this);
if (elem.is(':checkbox')) {
console.log( !!elem.attr("checked"));
} else {
console.log(elem.val());
}
});
});
Working fiddle here: https://jsfiddle.net/5yt9hon1/1/

Answer 2

Check some checkboxes and hit submit. You will see the values of the checkboxes in a div.
$(document).ready(function () {
$('#btnSubmit').click(function () {
var result = $('input[type="checkbox"]:checked')
if (result.length > 0) {
var resultString = result.length + " checked <br/><br/>"
result.each(function () {
resultString+= $(this).val() + "<br/>";
});
$('#divCheckboxValues').html(resultString);
}
else {
$('#divCheckboxValues').html(" No checkbox checked");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id="tableScanItems" class="table">
<th>Scan Item</th>
<th>Inactive</th>
<tr>
<td><input type='text' id='input1' class='form-control'/></td>
<td><input type='checkbox' id='checkbox1' class='form-control'/></td>
</tr>
<tr>
<td><input type='text' id='input2' class='form-control'/></td>
<td><input type='checkbox' id='checkbox2' class='form-control'/></td>
</tr>
<tr>
<td><input type='text' id='input3' class='form-control'/></td>
<td><input type='checkbox' id='checkbox3' class='form-control'/></td>
</tr>
</table>
<input id="btnSubmit" type="submit" value="submit" />
<br />
<div id="divCheckboxValues">
</div>