Посчитать количество отмеченых чебоксов

Тема в разделе "JavaScript", создана пользователем zilon, 16 сен 2013.

Модераторы: ZiX
  1. zilon

    zilon

    Регистр.:
    30 июл 2011
    Сообщения:
    370
    Симпатии:
    147
    Не получается вывести количество массового отмеченных чебоксов вот пример new-muzon.ru/zilon/index.php когда по одному отмечаю то число выводится. А когда нажимаю на один и веду мышкой по остальным(как на яндекс почте, массово выделяю письма чтоб удалить) то отмеченные не выводятся, не знаю почему. Вот код который считает их... подскажите пожалуйста как исправить :thenks:

    Код:
    <script type="text/javascript">
    
        var count = 0;
    
        $(function() {
            displayCount();
            $('input[type=checkbox]').click(function() {
                if (this.checked) {
                    count++;
                } else {
                    count--;
                }
                displayCount();
            });
        });
    
        function displayCount() {
            $('#count').text(count);
        }
    
    </script>
     
  2. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.546
    Симпатии:
    1.418
    При том действии, которым ты массово выделяешь чекбоксы, кстати спасибо не знал о таком свойстве чекбоксов, что происходит?
    mousedown -> mousemove -> mouseup
    Значит тебе надо еще один обработчик на mouseup повесить, в котором будет функция обходящая все чекбоксы и проверяющая checked.

    Списки событий:
    http://anton.shevchuk.name/javascript/jquery-for-beginners-events/
     
    zilon нравится это.
  3. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    не уверен насчет производительности (лучше кешировать счётчик, чем по dom'у гулять каждый пук), но суть примерно в этом:
    HTML:
    $( 'form input[type="checkbox"]' ).mouseout( function(){
    
        var f = $(this).closest( 'form' )[0];
    
        console.log( $('input:checked', f).length );
    
    });
     
    zilon нравится это.
  4. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    Код:
    <script type="text/javascript">
    
        var count = 0;
    
        $(function() {
            displayCount();
            $('input[type=checkbox]').mouseleave(function() {
                count = $("input[type=checkbox]:checked").size();
                displayCount();
            });
           
            function displayCount() {
                $('#count').text(count);
            }
        });
    
    </script>
     
    zilon нравится это.
  5. zilon

    zilon

    Регистр.:
    30 июл 2011
    Сообщения:
    370
    Симпатии:
    147
    спасибо, ещё хотел узнать, если у меня два списка, домены и файлы, можно как не будь отметить только чебоксы с доменами? Вот пример там все чебоксы считаются - new-muzon.ru/test/index.html
     
  6. JJTR

    JJTR Создатель

    Регистр.:
    11 фев 2014
    Сообщения:
    37
    Симпатии:
    26
    Вы можете получить все проверяются коробки и метод использование size(), чтобы получить номера проверяется.
    PHP:
    var checked_count = $('input[type="checkbox"]:checked').size();
     
  7. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    170
    Симпатии:
    81
    А в чем проблема? Чекбоксам с доменами присвой класс domen, а с файлами - file. И по классу отмечай уже.
     
    Последнее редактирование: 26 фев 2014
    anserega нравится это.
  8. zilon

    zilon

    Регистр.:
    30 июл 2011
    Сообщения:
    370
    Симпатии:
    147
    проблема в том что я в js ничего не понимаю, в php более менее шарю а в js дуб дубом)
    а как по классам отмечать?
     
  9. dwarf

    dwarf Постоялец

    Регистр.:
    12 июн 2011
    Сообщения:
    88
    Симпатии:
    18
    Добавить чекбоксам с доменами класс
    Код:
    <input name='doman[]' type='checkbox' class="domainCheckbox" value='doman-1.ru'>
    И в коде указать что нужно выбирать именно такие чекбоксы:
    Код:
    ...
    $('input.domainCheckbox[type=checkbox]').mouseleave(function() {
    ...
    Код:
    ...
    $("input.domainCheckbox[type=checkbox]:checked")
    ...
     
    zilon нравится это.
  10. zilon

    zilon

    Регистр.:
    30 июл 2011
    Сообщения:
    370
    Симпатии:
    147
    там код немного поменялся, подскажите пжалуста что тут менять надо в скриптах
    классы добавил к чебоксам

    в index.html

    Код:
    <script type="text/javascript">
    jQuery(document).ready(function($){
    $(':checkbox').toggler(true);
    });
    </script>
    domains.js

    Код:
    $(document).ready(function(){
    [code=javascript] var checkbox = $(':checkbox'),count,checked,started = false;
    $('body').mouseup( function(){
    started = false;
    });
    checkbox.each(function(indx, element){
    $(this).click( function(){
    checked = $(this).prop("checked");
    $(this).prop({"checked":!checked});
    count = $( ':checked' ).size()
    $('#count').text(count)
    });
    $(this).mousedown( function(){
    checked = $(this).prop("checked");
    $(this).prop({"checked":!checked});
    count = $( ':checked' ).size()
    $('#count').text(count)
    started = true;
    });
    $(this).mouseenter( function(){
    checked = $(this).prop("checked");
    started && $(this).prop({"checked":!checked});
    count = $( ':checked' ).size()
    $('#count').text(count)
    });
    });
    
    });