I have go a varabile called checkBox which should find the input tag inside the <td> and an attribute to it. but the find method seems not finding the input tag. does any one knows why.
$("#table-products tbody tr td").on('click', function () {
var checkBox = $(this).find("input");
if ($(checkBox).is(':checked')) {
checkBox.prop("checked", false);
} else {
checkBox.prop("checked",true);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-hover table-bordered" id="table-products">
<thead>
<tr>
<th>Product Name</th>
<th>Product Categorey</th>
<th>Product Price</th>
<th>Product Color</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Iphone 4</td>
<td>Mobiles</td>
<td>450</td>
<td>Red</td>
<td><input type="checkbox" class="product-checkbox" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Try this:
$("#table-products tbody tr td").on('click', function () {
var checkBox = $(this).parents('tr').find("input");
if ($(checkBox).is(':checked')) {
checkBox.prop("checked", false);
} else {
checkBox.prop("checked", true);
}
});