if checkbox checked changed, change class on td - php

Question

I want only td (Test 1) change class(yellow).
How to make only td (Test 1) change color (not entire row).
$('input[name="cek"]').on('change', function() {
$(this).closest('tr').toggleClass('yellow', $(this).is(':checked'));
});
$(document).ready(function() {
$('input:checked[name="cek"]').closest('tr').addClass('yellow');
});
.yellow {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

Answer 1

You can try the below code.
$('input[name="cek"]').on('change', function() {$(this).closest('td').next('td').toggleClass('yellow',$(this).is(':checked'));});
.yellow{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" >
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

Answer 2

You can do something below
$('input[name="cek"]').on('change', function() {
// $(this).closest('td').toggleClass('yellow',$(this).is(':checked'));
$(this).parents('td').siblings("td:eq(1)").toggleClass('yellow',$(this).is(':checked'));
});
$(document).ready(function() {
$('input:checked[name="cek"]').closest('tr').addClass('yellow');
});
.yellow{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" >
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

Answer 3

Use parent() with next().
$('input[name="cek"]').on('change', function() {
$(this).parent().next('td').toggleClass('yellow', $(this).is(':checked'));
});
.yellow {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>