Question

我正在尝试计算在我的网站上点击复选框的次数，复选框用于过滤器（男士，女士，年龄等）。目前我有这个代码

jQuery('[id^="checkbox"] input').each(
    function (index, element) {
        jQuery(this).click(
            function () {
                console.debug("Hello");
            }
        );
    }
);

这将计算（在控制台中）复选框被点击的次数（ID以复选框开头），但由于每次点击都会刷新信息（和网址），因此只计算第一次点击，其余的将不计算在内。在页面刷新后还有进行计数吗？谢谢

Answer 1

要在所有用户中检查所有复选框的持续计数，您需要具有所有计数更新的中心总计。即使像YouTube这样的大型网站仍然在努力（尽管程度较小），这将非常棘手。

我不知道这可以完全用JS完成（如果有人知道，请编辑这个答案），你可能需要某种后端代码。

您可以采取的一种方法是：

点击
点击
计时器结束后，向后端页面发送ajax请求
后端页面收到更新，更新中央总计

您可以采取许多其他方法。您可能遇到类似的问题，中心总数可能不是非常准确（如果ajax请求被中断），并且由于ajax请求，您的带宽使用率会增加。

Gennady Dogaev分享了一些非常好的代码，它会将复选框的ID和它的值发布到另一个页面。此页面可能具有更新数据库或类似内容的逻辑，以跟踪正在使用的复选框。

<body>
    <input type="checkbox" id="check_1" /> 1
    <input type="checkbox" id="check_2" /> 2
    <input type="checkbox" id="check_3" /> 3
</body>


$(function(){
    $("input[type=checkbox]").click(function(){
        var box = $(this);
        var data = {
            id: box.prop('id'),
            checked: box.is(':checked')
        };
        $.get('https://stackoverflow.com/', data).always(function(response){
            console.log('server responded', response);
            /*Click registered, do what you want here*/
        });
    });
});

https://jsfiddle.net/nrLpxLuf/

以下答案是帮助计算页面上所有选中的复选框并在本地更新总数。我把它留在这里作为参考。

您无需遍历所有元素以将单击事件附加到所有元素。

而是将click事件附加到复选框集合，然后从click函数中更新总变量。
var $inputs = $('[id^="checkbox"] input');
var total = $inputs.filter(':checked').length; //this will be 0 if none are found

$inputs.on('click', function(event) {
  if($(this).is(':checked')) {
     total++;
  } else {
     total--;
  }

  console.log(total);
});
如果您只想查看是否已点击，只需添加到总计。

Answer 2

如果要在刷新后计算检查数，则需要在加载时设置值。

var total = 0;
$(document).ready(function (event) {
    //onload count for the checked checkboxes and set total value
    total = $('[id^="checkbox"] input:checked').length;
    $('[id^="checkbox"] input').on('click', function (event) {
        $(this).prop('checked') ? total++ :total--;
    });
});

即使刷新后，也会点击复选框

2 个答案: