无法在每个复选框上申请点击功能

Question

我想在数据表行中添加的每个复选框上申请onclick函数。

这是图像：

现在的问题是我正在编写像这样的代码

    var tablei = $('#domains_list').DataTable();
    $('#domains_list').find("input[name='chk[]']:checked").each(function()
                    {
                         $(this).on('click',function () 
                           {
                               // make a class change to the parent tr having the checkbox;
                           } );
                    }
               });

但问题是，我无法编写剩下的代码。

Answer 1

您不需要每个都绑定事件。您还应该在点击处理程序

中查看checked

使用

$('#domains_list').find("input[name='chk[]']").on('click', function() {
    //Perform your operation
    if (this.checked) {
        $(this).closest('tr').addClass('smclass');
    } else {
        $(this).closest('tr').removeClass('smclass');
    }
});

OR

$('#domains_list').find("input[name='chk[]']").on('click', function() {
    //Perform your operation
    $(this).closest('tr').toggleClass('smclass', this.checked);
});

Answer 2

您无需单独迭代元素来绑定事件：

  $('#domains_list').find("input[name='chk[]']:checked").click(function(){
      $(this).closest('tr').addClass('smclass');
  });

Answer 3

我认为你想要的是使用on（）......

var tablei = $('#domains_list').DataTable();
$('#domains_list').on('click', "input[name='chk[]']", function ()  {
    // Verify here if the checkbox is checked or not, but you could prefer the change event
    // make a class change to the parent tr having the checkbox;
});

但更好的方法是在添加行时附加then事件（如果你能够这样做）。

手册：http://api.jquery.com/on/

Answer 4

因为所有复选框都附加了相同的功能，所以您不需要使用每个复选框循环所有元素。一种更简单的方法

$('document').on('click', "input[name='chk[]']:checked", function(){

   //make sure you reset all tr before applying new class
   $(this).closest('tr').addClass('custom-class');
});