title: how to check how many html elements were checked
body: <p>i need to find how many HTML elements were selected. my HTML file :</p>
  <pre><code>    &lt;div&gt;
        &lt;label&gt;kana &lt;/label&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;kana&quot; class=&quot;extra&quot; /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label&gt;kala &lt;/label&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;kala&quot; class=&quot;extra&quot; /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label&gt;Ananas &lt;/label&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;Ananas&quot; class=&quot;extra&quot; /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label&gt;Tomato &lt;/label&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;Tomato&quot; class=&quot;extra&quot; /&gt;
      &lt;/div&gt;
  </code></pre>
  <p>i came out with a solution that I need to do for loop to those elements and check if any elements were selected but it didn't work</p>
  <pre><code>    const extra = document.querySelectorAll(&quot;.extra&quot;);
      
      const myfunction = (extra) =&gt; {
        let count = 0
        console.log(toppings.value);
        for (let i = 0; i &lt;= extra.length; i++) {
          if(extra[i].checked ===true){
            count++
          }
        }
      };
    myfunction(extra);
  </code></pre>