Javascript 数组上的CSS动画重置

每当我按下页面上的复选框时，尝试重置css动画。它适用于单个div，但我想让它同时适用于所有div，所以我使用了for。问题只是最后一个div重置。我做错了什么？谢谢你的帮助

<div class="total">Subtotal: $300</div>
<div class="total">Subtotal: $300</div>
<div class="total">Subtotal: $300</div>
  <div class="produse">
    <input type="checkbox" name="product" value="Logo design">I have a bike
    <br><input type="checkbox" name="product" value="Website layout">I have a car 
</div>

---

另外，我知道我应该使用getElementById，但这不是一个选项，因为它用于wordpress插件，并且复选框没有id标记。

既然您已经在使用jQuery，那么您应该真正使用它的方法来实现最大的浏览器兼容性：

jQuery(document).ready(function($){
    $(":checkbox").on("click", function(){
        // restart animation
        $(".total")
            .css({
                fontSize: ""
             })
            .animate({ fontSize: "24px" }, 1000 );
    });
});

---

有关如何使用animate获得所需效果的更多信息，请参阅典型问题，检查：在循环中创建闭包：本页上的一个常见错误：这里的解决方法也很少……因为您使用的是jquery，您可能需要利用。每个

jQuery(document).ready(function($){
    $(":checkbox").on("click", function(){
        // restart animation
        $(".total")
            .css({
                fontSize: ""
             })
            .animate({ fontSize: "24px" }, 1000 );
    });
});