首页最简单的方法Javascript 统计复选框选中个数并显示在html中

最简单的方法Javascript 统计复选框选中个数并显示在html中

时间: 2024-02-05 21:10:56 浏览: 104

可以使用 JavaScript 遍历页面中的所有复选框元素，并计算选中的个数。然后将该数字显示在HTML页面中的某个元素中。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>统计复选框选中个数并显示在HTML中</title> </head> <body> <h2>请选择您喜欢的水果：</h2> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="grape">葡萄<br> <input type="checkbox" name="fruit" value="watermelon">西瓜<br> <br> <p>您已选中 <span id="count">0</span> 个水果。</p> <script> // 获取所有复选框元素 var checkboxes = document.getElementsByName("fruit"); // 给每个复选框元素绑定点击事件 for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('click', function() { // 计算选中的个数 var count = 0; for (var j = 0; j < checkboxes.length; j++) { if (checkboxes[j].checked) { count++; } } // 显示选中的个数 document.getElementById("count").innerHTML = count; }); } </script> </body> </html> ``` 在这个示例中，我们先获取所有 name 属性为 "fruit" 的复选框元素，然后给每个元素绑定点击事件。每次点击事件都会重新计算选中的个数，并将其显示在页面的一个 span 元素中。

阅读全文