title: How do I display image count of specific type of image with jQuery?
body: <p>So I've got a page with 6 images. 4 are of some type of ball (basketball, baseball, etc.). One is of a truck, and another is random. </p>
  
  <p>I have a from with two radio buttons which give the user the option to display the number of each type of image (Images of balls, images of trucks, etc). I need to write javascript/jquery to take the radio button they selected and then display the image count below in a span tag ("There are X amount of picture of a ball", "There are X amount of pictures of a truck"). I can figure out how to get values of what is checked but I have no idea how to get the image count of how many of each type of image. (Without just making seperate spans with the number preset and just displaing whichever count the user chooses)</p>
  
  <p>Here is what I've got so far:</p>
  
  <pre><code>&lt;div id="images"&gt;
  &lt;h3&gt;Some Images&lt;/h3&gt;
      &lt;p&gt;&lt;img src="firetruck.jpg" alt="pic of truck" &gt;  |
      &lt;img src="baseball.jpg" alt="pic of baseball" &gt;  |
      &lt;img src="soccer_ball.jpg" alt="pic of soccer ball" &gt;
      &lt;/p&gt;
  
      &lt;p&gt;&lt;img src="hockey_puck.jpg" alt="pic of hockey puck" &gt;  |
      &lt;img src="tennis_ball.jpg" alt="pic of tennis ball" &gt;  |
      &lt;img src="basketball.jpg" alt="pic of basketball" &gt;     &lt;/p&gt;
  
  &lt;/div&gt;&lt;!-- end of 'images' div --&gt;
  
  
  &lt;input type="radio" name="imageCount" id="ballImages" value="ballImages"&gt;Images of Balls&lt;br&gt;
      &lt;input type="radio" name="imageCount" id="truckImages" value="truckImages"&gt;Images of Trucks&lt;br&gt;&lt;br&gt;
      &lt;input type="button" name="btnImageCount" value="Image Count" onclick="getImageCount()"&gt;
      &lt;span class="spanImageCount"&gt;&lt;/span&gt;
  
  
  &lt;script&gt;
  
  function getImageCount()
  {
      if ($("#ballImages").prop("checked"))
      {
      var count = $("#images img[src*="ball"]").length;
      document.write('&lt;span class="spanImageCount"&gt;There are ' + count + ' images of a ball!&lt;/span&gt;');
      }
      else if ($("#truckImages").prop("checked"))
      {
      var count = $("#images img[src*="truck"]").length;
      document.write('&lt;span class="spanImageCount"&gt;There are ' + count + ' images of a truck!&lt;/span&gt;');
      }
  }
  </code></pre>
  
  <p></p>