跟踪JavaScript中的复选框计数

Keeping track on Checkbox count in JavaScript

本文关键字：复选框 JavaScript 跟踪      更新时间：2023-09-26

我想跟踪我的复选框计数。例如，如果我有3个复选框苹果芒果橙子当我选中"苹果"复选框时，它应该在标签旁边显示计数为1，如果我单击"桔子"复选框，它应该显示计数为2。现在，如果我取消选中Apples，现在桔子计数应该变成1，苹果应该变成0。

我已经尝试了以下代码：

<input type="checkbox" name="apples" id="fruits"/> Apples <br/>
<input type="checkbox" name="mangoes" id="fruits"/> Mangoes <br/>
<input type="checkbox" name="oranges" id="fruits"/> Oranges <br/>
<script>
var inputElems = document.getElementByTagname("input");
for (var i=0; i  &lt; inputElems.length; i++) {
                if (inputElems[i].type === "checkbox" &amp;&amp; inputElems[i].checked === true) 
                {
                    if(inputElems[i].id === "apple")
                    {
                    count1++;
                    count1 = count1+count2+count3;
                    alert('count for apples: '+count1);
                    }
                    if(inputElems[i].id === "mango")
                    {
                    count2++;
                    count2 = count1+count2+count3;
                    alert('count for mangoes: '+count2);
                    }
                    if(inputElems[i].id === "orange")
                    {
                    count3++;
                    count3 = count1+count2+count3;
                    alert('count for oranges: '+count3);
                    }
                }
                }
              }

在这里，我尝试将值放入警告框中。但我想试着把它放在标签旁边。即：苹果（1）芒果（3）橙子（2）根据我选择的复选框，像这样。我该怎么做？请帮帮我。

谢谢，Shruthi

document.getElementByTagname("input");，它是getElementsByTagName()

for (var i=0; i &lt; inputElems.length; i++) {，用< 代替$lt;

if (inputElems[i].type === "checkbox" &amp;&amp; inputElems[i].checked === true)，用&&代替&amp;&amp;。

<input type="checkbox" name="apples" id="fruits"/> Apples <br/>
<input type="checkbox" name="mangoes" id="fruits"/> Mangoes <br/>
<input type="checkbox" name="oranges" id="fruits"/> Oranges <br/>

所有输入类型都有id ="fruits"，这是错误的，因为id应该是唯一的，并且在js中检查"apples"、"桔子"。还添加一个onchange事件来检查用户是否选中了复选框

相关文章：