Jose Neto Jose Neto - 6 months ago 29
HTML Question

Gmail like select all checkbox

Does someone have Javascript code that implement a “select all” check box in a index page, with pagination, that also allows you to select all records in all pages, not only the displayed itens, just like gmail web page does when you click ALL in the upper left check box:

option to select all
message allows you to select all records

Answer

Get in your backend the 'all_records' field to identify all records (not just checkboxes in the page). Write in 'total_records' input the total of all your records without pagination.

Try the following 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;
}

See working in: https://jsfiddle.net/pv57hx3h/

Comments