Gmail mag alles markieren checkbox

Question

Hat jemand Javascript-Code, der ein "Alles auswählen" -Kontrollkästchen in einer Indexseite mit Paginierung implementiert, das Ihnen auch erlaubt, alle Datensätze auf allen Seiten auszuwählen, nicht nur die angezeigten Itens gmail Webseite tut, wenn Sie alle in der oberen linken Kontrollkästchen klicken:

Answer 1

im Backend Holen Sie die ‚all_records‘ Feld alle Datensätze zu identifizieren (und nicht nur Kontrollkästchen in der Seite). Schreiben Sie in 'total_records' die Summe aller Ihrer Datensätze ohne Paginierung.

Versuchen Sie, den folgenden Code:

HTML:

<form action="#"> 
    <p><label><input type="checkbox" id="check_all"/> Check all</label> 
    <input id='total_records' type="hidden" value='50'/> 
    <input id='all_records' type="hidden" value='0'/> 
    <label id='all_records_message' class='check_message' style='display:none'>Todas os <b class='total_pagina'></b> registros dessas pagina foram selecionados 
     <a id= 'all_records_link' href="#">Selecione todos os registros <b class='total_consulta'></b> da 
     consulta</a> 
    </label> 
    <label id='no_records_message' class='check_message' style='display:none'>Todas os <b class='total_consulta'></b> registros estão selecionados 
     <a id= 'no_records_link' href="#">Limpar a seleção</a> 
    </label> 
    </p> 
    <fieldset class='check_itens'> 
     <legend>Loads of checkboxes</legend> 
     <p><label><input type="checkbox" /> Option 1</label></p> 
     <p><label><input type="checkbox" /> Option 2</label></p> 
     <p><label><input type="checkbox" /> Option 3</label></p> 
     <p><label><input type="checkbox" /> Option 4</label></p> 
    </fieldset> 
</form> 

Javascript (jQuery):

function check_all_click() { 
    if ($('#check_all').prop("checked")) { 
      $('#all_records_message').show(); 
     } else { 
      $('#all_records_message').hide(); 
      $('#no_records_message').hide(); 
      $('#all_records').val(0); 
     } 
} 

$(document).ready(function() { 
    $('.check_message > b.total_pagina').html($('.check_itens :checkbox').length); 
    $('.check_message > b.total_consulta').html($('#total_records').val()); 

}); 

$("#check_all").change(function() { 
     $("input:checkbox").prop('checked', $(this).prop("checked")); 
     check_all_click(); 
}); 

$('#all_records_link').click(function() { 
    $('#all_records').val(1); 
    $('#all_records_message').hide(); 
    $('#no_records_message').show(); 
}); 

$('#no_records_link').click(function() { 
    $('#all_records').val(0); 
    $('#no_records_message').hide(); 
    $('#check_all').trigger('click'); 
}); 

$('.check_itens :checkbox').change(function() { 
    if ($('#check_all').prop("checked")) { 
     $("#check_all").prop('checked', false); 
     check_all_click(); 
    } 
    if ($('.check_itens :checkbox').length == $('.check_itens :checkbox:checked').length) { 
     $('#check_all').trigger('click'); 
    } 
}); 

CSS:

.check_message { 
    display: block; 
    background-color: #ffc; 
    color: #222; 
    padding: 3px 8px; 
    font-size: 90%; 
    text-align: center; 
    font-family: arial, sans-serif; 
} 

Siehe in Arbeit: https://jsfiddle.net/pv57hx3h/