Подсчитайте количество отмеченных флажков и покажите их на фиксированном div, используя jQuery

Я пытаюсь написать сценарий jQuery (я никогда не писал ранее, и мне нужна помощь). Подробности следующие: У меня есть форма с флажками. Каждый флажок имеет разные идентификаторы и имена, которые мне понадобятся по моим собственным причинам программирования. Я просто хочу подсчитать количество флажков и просто отобразить их с правой стороны в фиксированном div. Div должен отображаться только после галочки с первым флажком. Как я могу это сделать? Мой примерный флажок:Подсчитайте количество отмеченных флажков и покажите их на фиксированном div, используя jQuery

<input type="checkbox" name="check_box_no_2" id="check_box_no_2" value="some_important_value">

Имя контрольной метки является инкрементным. Значение следующего будет check_box_no_3. Пожалуйста, помогите ...

До сих пор я возился с

$("input[type=checkbox][checked]").each( 
    function() { 
     // Insert code here 
    } 
);

, но это, кажется, не будет работать с FireFox.

источник

2010-08-19 JohnRoach

Для выбора отмеченных флажков вам понадобится класс :checked psuedo. Вы также должны соблюдать каждый флажок, а когда изменяется его настройка, обновите счетчик и покажите или скройте div. Вот один из способов сделать это:

$(document).ready(function() { 
    $("input[type=checkbox]").each(function() { 
    $(this).change(updateCount); 
    }); 

    updateCount(); 

    function updateCount() { 
    var count = $("input[type=checkbox]:checked").size(); 

    $("#count").text(count); 
    $("#status").toggle(count > 0); 
    }; 
});

Где #count это элемент, который будет показывать количество (возможно, тэг абзаца), и #status является ДИВ вы хотите, чтобы показать/скрыть.

Полный пример HTML, для справки:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $("input[type=checkbox]").each(function() { 
      $(this).change(updateCount); 
     }); 

     updateCount(); 

     function updateCount() { 
      var count = $("input[type=checkbox]:checked").size(); 

      $("#count").text(count); 
      $("#status").toggle(count > 0); 
     }; 
     }); 
    </script> 
    </head> 
    <body> 
    <ul> 
     <li><input type="checkbox"> One</li> 
     <li><input type="checkbox"> Two</li> 
     <li><input type="checkbox"> Three</li> 
    </ul> 

    <div id="status"> 
     <p id="count">0</p> 
    </div> 
    </body> 
</html>

источник

2010-08-19 07:56:07

Это не работает :(и это дает неперехваченным TypeError: Невозможно вызвать метод 'каждый' из null при запуске :(Пожалуйста, скажите мне, как это работает. Я создал div и абзац с подсчетом и статусом id, что еще я должен проверить? Все мои флажки находятся в форме тег. Я не знаю, что еще делать ... – JohnRoach

Я добавил полный рабочий HTML-код к примеру, чтобы вы могли сравнить с HTML, с которым работаете. –

Должен ли быть вызов 'updateCount()' непосредственно перед его определением? Это приведет к тому, что код обновления будет выполнен до загрузки страницы - OP только хотел, чтобы обновление произошло при первом щелчке по кнопке – belugabob

Попробуйте это:

var totalChecked  = 0; 
$("input[type=checkbox]:checked").each(function(){ 
    totalChecked++; 
});          
if(totalChecked > 0){ 
    $("div.display").css("display,block"); 
    $("div.display").text(totalChecked); 
}else{ 
    $("div.display").css("display,none"); 
}

источник

2010-08-19 08:11:43 Murugesh

Идентификатор div «отображается» правильно, если так ничего не появляется. Может ли быть причина для этого? – JohnRoach

Подсчитайте количество отмеченных флажков и покажите их на фиксированном div, используя jQuery

ответ

Смежные вопросы