Question

我试图使用一个我认为非常有用的脚本，但我不能得到它。所有这一切都是一个简单的复选框，突出显示行类型的脚本，但我被困在某个地方。

＆＃13;

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

＆＃13;

.highlight {
  background-color: red
}

＆＃13;

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

＆＃13;

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

更新//

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

$("#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")}
    });

那会这样做......

onChange复选框突出显示行

1 个答案: