javascript - onChange 复选框高亮行

Question

我正在尝试使用一个我认为非常有用的脚本，但我一定没有得到它。这只是一个简单的复选框，突出显示行类型的脚本，但我被困在某个地方。

$(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>

因此，当选中该特定行的复选框时，我希望能够将类“突出显示”添加到该复选框的表格行。

已更新//

我还使用以下脚本尝试了建议的答案之一:

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

它仍然不会触发，我已经在 jsFiddle 上对其进行了测试并且它确实可以在那里工作，但在我的环境中它就是不会触发。

如果这意味着什么，这在技术上是如何生成这些行的:

$.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

使用 jquery..

并且不要忘记添加jquery cdn......

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

这样就可以了...