I need to fill the td background with color when a checkbox is clicked. I can manage the background on click. But don't know how to clear it on unchecked.
td{padding:10px}<table>
<tr>
<td><input type="checkbox" value="1">1</td>
<td><input type="checkbox" value="2">2</td>
<td><input type="checkbox" value="3">3</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
$(function(){
$('td').click(function(event) {
if (!$(event.target).is('input')) {
$('input:checkbox', this).prop('checked', function(i, value) {return !value;});
$(this).css('background-color','#ffcc00');
}
});
});
</script>Can try this ;)
<style>td{padding:10px}</style>
<table>
<tr>
<td><input type="checkbox" value="1">1</td>
<td><input type="checkbox" value="2">2</td>
<td><input type="checkbox" value="3">3</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
$(function()
{
$('td').click(function(e)
{
// Get input
var input = $(this).find('input:checkbox');
// Toggle checkbox status
if(!$(e.target).is('input')) input.prop('checked', !input.is(':checked'));
// Toggle background-color
$(this).css('background-color', input.is(':checked') ? '#ffcc00' : 'transparent');
});
});
</script>I would do something like this to toggle background color. I prefer class/id selector than using tag selector, and to denote that class is used in JS, I appended "js_" to class name at the beginning, Update it as you like.
$(function() {
$(".js_checkbox").on('click', function(e) {
let checkbox = $(this);
let td = $(checkbox).closest("td");
if ($(checkbox).is(":checked")) {
$(td).css("background-color", "#ffcc00")
} else {
$(td).css("background-color", "")
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox" class="js_checkbox" value="1">1</td>
<td><input type="checkbox" class="js_checkbox" value="2">2</td>
<td><input type="checkbox" class="js_checkbox" value="3">3</td>
</tr>
</table>Keep it simple and toggle the background color via the boolean. Not sure why you're putting your listener on the TD instead of the checkbox.
$(function() {
$('td [type=checkbox]').click(function() {
$(this).closest('td').css('background-color', $(this).prop('checked') ? "#ffcc00" : "#fff");
});
});td {
padding: 10px
}<table>
<tr>
<td><label><input type="checkbox" value="1">1</label></td>
<td><label><input type="checkbox" value="2">2</label></td>
<td><label><input type="checkbox" value="3">3</label></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>