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

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

3 голосов
/ 19 августа 2010

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

<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.

Ответы [ 2 ]

9 голосов
/ 19 августа 2010

Чтобы установить флажки, вам нужен псевдо-класс :checked.Вам также необходимо соблюдать каждый флажок, и, когда его настройки изменяются, обновлять счетчик и показывать или скрывать 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 - это div, который вы хотите показать / скрыть.

Полный пример 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>
0 голосов
/ 19 августа 2010

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

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");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...