我有一个搜索和复选框过滤器,应该一起过滤,但是我的复选框过滤器代码无法正常工作

时间:2018-10-04 15:40:02

标签: javascript jquery

由于某种原因,我的复选框过滤器不起作用,但是我的搜索过滤器起作用。它出什么问题了?这是我的搜索+下方的复选框过滤器:

// search filter (working)

$(document).ready(function() {
  $("#myInput").keyup(function() {

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
      count = 0;

    // Loop through the comment list
    $("tr").each(function() {

      // If the list item does not contain the text phrase fade it out
      if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        $(this).fadeOut(0).addClass('hidden');

        // Show the list item if the phrase matches and increase the count by 1
      } else {
        $(this).show().removeClass('hidden');
        count++;
      }
    });

    // Update the count
    var numberItems = count;
    $("#filter-count").text("Number of Rows = " + count);
  });
});


// checkbox filter (not working)

$(document).ready(function() {
  $('#myTable tr' + $(this).attr('rel')).show();

  $('div.modal-body').find('input:checkbox').live('click', function() {

    if ($('div.modal-body').find('input:checkbox:checked').length > 0) {
      $('#myTable tr').hide();
      $('div.modal-body').find('input:checked').each(function() {
        $('#myTable tr' + $(this).attr('rel')).not('.hidden').show();
      });
    } else {
      $('#myTable tr').not('.hidden').show();
    }
  });
});

1 个答案:

答案 0 :(得分:0)

live在最新版本的jquery中已贬值,请使用on代替您的事件。

  $(document).ready(function () {
        $('#myTable tr' + $(this).attr('rel')).show();

        $('div.modal-body').find('input:checkbox').on('change', function () {

            if($('div.modal-body').find('input:checkbox:checked').length > 0){
            $('#myTable tr').hide();
            $('div.modal-body').find('input:checked').each(function () {
                $('#myTable tr' + $(this).attr('rel')).not('.hidden').show();
            });
            } else {
                $('#myTable tr').not('.hidden').show();
            }
        });
    });