How to change background-color on checkbox toggle with jquery?-CodePudding

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>

CodePudding user response：

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"  value="1">1</td>
    <td><input type="checkbox"  value="2">2</td>
    <td><input type="checkbox"  value="3">3</td>
  </tr>
</table>

CodePudding user response：

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>

CodePudding user response：

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>