onChange Checkbox Highlight Row

Question

I'm trying to use a script that I thought would be incredibly useful but I must not be getting it. All it is is a simple check the box, highlight the row kind of script but I'm getting stuck somewhere.

$(document).ready(function() {
  $("input[type='checkbox']").on('change', function() {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight");

    } else {
      $(this).closest('tr').removeClass("highlight");
    }
  });
});

.highlight {
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
  <tr>
    <td><input id="checkboxSelect" type="checkbox"></td>
    <td>231540</td>
    <td>2018-02-25 00:00:00</td>
    <td>93.50</td>
  </tr>
  <table>

So when the checkbox of that particular row is checked I want to be able to add the class "highlight" to that checkbox's table row.

UPDATED //

I have also tried one of the suggested answers with the following script:

$("#checkboxSelect").click(function(){
if ($(this).is(":checked")){
 $(this).parent().parent().removeClass("highlight");
 alert('hello');}
else{
$(this).parent().parent().addClass("highlight");
alert('goodbye');}
    });

It still won't fire, I have tested it on jsFiddle and it does work there, but in my environment it just won't fire.

In case it means anything this is technically how these rows are generated:

$.ajax({
            type:'GET',
            url: '/customers/details/openInvoices',
            dataType:'json',
            data: {
                'customerID': $('select[name=payer_id]').val(),
               '_token': $('input[name=_token]').val(),
            },
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#createOrigin').modal('show');
                            toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                         $.each(data, function(i,val) {
                                    $('<tr>').append(
                                    $('<td>').html('<input type="checkbox" class="checkboxSelect">'),
                                    $('<td>').text(val.pro_number),
                                    $('<td>').text(val.due_date),
                                    $('<td>').text(val.balance)).appendTo('#customerOpenInvoicesTable');
                            $('#openInvoicesOverlay').html('');
                             $('#openInvoicesOverlay').removeClass('overlay');

               });
              }
             }
            });

Answer 1

use jquery..

And don't forget to add jquery cdn......

$("#checkboxSelect").click(function(){
if ($(this).is(":checked")){
 $(this).parent().parent().removeClass("highlight")}
else{
$(this).parent().parent().addClass("highlight")}
    });

That will do it...