全選/取消全選 - 複選框和表格數據

我目前使用Footables來顯示錶格數據。每一行都有一個複選框。有一個主複選框可以選擇全部。我遇到了一些困難。該表有一個過濾器。當我應用過濾器並嘗試檢查該過濾器中的所有複選框時，它將無法工作。另外，由於我能夠立即檢查所有複選框，因此可以取消選中所有複選框？ EXAMPLE 全選/取消全選 - 複選框和表格數據

複選框功能

$(document).on('change','input[name="check_all"]',function() { 
     $("input[type=checkbox]").attr('checked', true); 
    }); 
    $(document).on('change','select',function() { 
     $('input[type=checkbox]').attr('checked', false); 
    });

表濾波器

$(function() { 
     $('table').footable().bind({ 
      'footable_filtering': function (e) { 
       var selected = $('.filter-status').find(':selected').text(); 
       if (selected && selected.length > 0) { 
        e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected; 
        e.clear = !e.filter; 
       } 
      }, 
      'footable_filtered': function() { 
       var count = $('table.demo tbody tr:not(.footable-filtered)').length; 
       $('.row-count').html(count + ' rows found'); 
      } 
     }); 

     $('.clear-filter').click(function (e) { 
      e.preventDefault(); 
      $('.filter-status').val(''); 
      $('table.demo').trigger('footable_clear_filter'); 
      $('.row-count').html(''); 
     }); 

     $('.filter-status').change(function (e) { 
      e.preventDefault(); 
      $('table.demo').data('footable-filter').filter($('#filter').val()); 
     }); 
    });

來源

2014-02-25 Code_Ed_Student

使用'.prop'而不是'.attr' –

你正在檢查所有箱子之所以選擇是因爲你沒有設置過濾器正確在你jQuery中。更改爲：

$(document).on('change', 'input[name="check_all"]', function() { 
      $("table.demo tbody tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked); 
      alert($("input:checkbox:checked").length); 
     });

來源

2014-02-25 07:13:59 techAddict82

This works！謝謝。 –

使用.prop（）而不是.attr（）
選中/取消選中僅可見的列
集選中所有複選框的狀態爲

嘗試

$(document).on('change', 'input[name="check_all"]', function() { 
    $(".footable tr:visible input[type=checkbox]").prop('checked', this.checked); 
});

來源

2014-02-25 05:45:46

太棒了！我真正的桌子很大，因此有幾個分頁應用過濾器。你的技術只檢查第一頁上的所有複選框，而不檢查其他頁面。 –

@Code_Ed_Student如何完成分頁......數據是否通過ajax加載 –

例如，如果您在應用過濾器時使用螢火蟲進行檢查，某些行將被隱藏，並且具有一個「footable-filtered」類，並且函數位於i只想檢查過濾結果中的複選框。 –

試試這個與not selecter將除級.footable -filtered

$(document).on('change', 'input[name="check_all"]', function() { 
      $(".footable tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked); 

     });

來源

2014-02-25 05:55:29 chriz

問題是，這仍然檢查由於過濾器而隱藏的複選框。 –

@Code_Ed_Student所以你想要？不應該檢查隱藏的？ – chriz

正確，而不是檢查隱藏的。例如，如果在應用過濾器時使用螢火蟲進行檢查，則某些行將被隱藏並具有一個「可腳步過濾」的類，使用上面的函數檢查所有行時，它會選擇過濾結果PLUS中的所有內容，從過濾器中隱藏什麼。 –

全選/取消全選 - 複選框和表格數據

回答

相關問題