Gmail 喜欢全选复选框 [英] Gmail like select all checkbox

问题描述

是否有人在索引页面中实现了全选"复选框的 Javascript 代码，带有分页，它还允许您选择所有页面中的所有记录，而不仅仅是显示的项目，就像 gmail 网页在您单击左上角复选框中的全部":

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:

推荐答案

在后端获取all_records"字段以标识所有记录(不仅仅是页面中的复选框).在'total_records'输入中写入没有分页的所有记录的总数.

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.

试试下面的代码:

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):

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;
}

参见工作:https://jsfiddle.net/pv57hx3h/

这篇关于Gmail 喜欢全选复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！