title: Tick a checkbox in a table cell by clicking anywhere in the table cell and change background color of that cell
body: <p>Basically, I have a table with each cell containing a checkbox. I want to be able to tick the checkbox by clicking anywhere within the cell and change the color of that cell which I have done.</p>
  
  <p>Now the problem is that when I tick the checkbox and then untick it, that cell is not getting that cell color back, as in the when the checkbox is unticked its cell color should be back to white. Can anyone help me? Help would be highly appreciated.</p>
  
  <p>Here is my fiddle <a href="http://jsfiddle.net/UcDMW/50/">http://jsfiddle.net/UcDMW/50/</a></p>
  
  <pre><code>$(function () {
      $('table tr td').on('click', function (e) {
          if (e.target.type == "checkbox") {
              if ($(this).is(':checked')) {
                  $(this).attr('checked', false);
                  $(this).css('background-color', 'white');
  
              } else {
                  $(this).attr('checked', true);
                  $(this).css('background-color', '#DFF0D8');
              }
              return;
          } else {
              if ($(this).find('input:checkbox').is(':checked')) {
                  $(this).css('background-color', 'white');
  
                  $(this).find('input:checkbox').attr('checked', false);
  
              } else {
                  $(this).find('input:checkbox').attr('checked', true);
                  $(this).css('background-color', '#DFF0D8');
  
              }
          }
      });
  });
  </code></pre>