1

All I am trying to do is have my checkbox change it's background colour when you hover over it. However, this is made more complicated by the fact that the td input:checkbox is dynamically created. I have tried every conceivable approach and I can not get it right. Here is the JQuery I have: 

/* snip */
    $('.table_products').on('click', 'td input:checkbox', function () {

    $("input:checkbox").hover(function(){
        $(this).css({"backgroundColor": "yellow"});
    }, function(){
        $(this).css({"backgroundColor": "white"});
    });
/* snip */
Anna
  • 339
  • 1
  • 17
Vince
  • 1,405
  • 2
  • 20
  • 33
  • 2
    if it's dynamically create use `$(document).on('hover', 'identifier', function(){` – Zak Apr 21 '16 at 23:49
  • 1
    Your code makes sense to me, but I think the problem is that checkbox styles aren't editable. See http://stackoverflow.com/a/24322691/1601698. Styling checkboxes involve a lot of hacking. – Byron Singh Apr 22 '16 at 00:00
  • @smerny, `backgroundColor` is the JavaScript property name and it is perfectly valid to use in jQuery. – André Dion Apr 22 '16 at 00:14

1 Answers1

2

Maybe it isn't possible to change the color inside the checkbox square but you can trick as @gavgrif said. I just hover when you pass on the checkbox (not on the entire td):

$("input[type='checkbox']").hover(function(){
  $(this).closest(".wrapper").css("background-color", "yellow");
}, function(){
  $(this).closest(".wrapper").css("background-color", "white");
});

Probably your selector was worng too (the correct way to declare is into []).

I just wrapped the checkbox but you can use your current parent:

  <div class="wrapper">
    <input type="checkbox"/>
  </div>

Plunker: https://plnkr.co/edit/5V5cUysB9E0SYGMddFKl?p=preview

Diego Polido Santana
  • 1,425
  • 11
  • 19
  • Thanks for your help. I was not aware that checkboxes can not edited. However your solution was a workable compromise. Essentially it highlights the correct row when you hover over the check box. Thanks ! – Vince Apr 22 '16 at 16:47