All geek questions in one place

Count the number of checked flags and show them on a fixed div using jQuery

I am trying to write a jQuery script (I have never written it before and I need help). Details are as follows: I have a form with checkboxes. Each flag has different identifiers and names that I will need for my own programming reasons. I just want to count the number of checkboxes and just display them on the right side in a fixed div. Div should be displayed only after a tick with the first flag. How can i do this? My sample checkbox:

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

The name check-box is incremental. The value of the following will be check_box_no_3. Please, help...

So far i have been playing with

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

but this does not seem to work with FireFox.

+3
2

, :checked psuedo-class. , , 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>
+9

:

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");
}
0

Source: https://habr.com/ru/post/1760477/

More articles:


All Articles