计数单击复选框，即使在刷新之后

我试图保持多少次复选框被点击在我的网站，复选框用于过滤器(男性，女性，年龄等)计数。现在我有这个代码

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

将计算(在控制台中)一个复选框被单击的次数(以checkbox开头的id)，但由于每次单击都会刷新页面信息(和url)，因此它将只计算第一次单击，其余的将不计算。页面刷新后，是否还需要继续计数?由于

要获得所有用户选中的所有复选框的持久计数，您需要有一个所有计数更新的中心总数。这将是相当棘手的，即使是像YouTube这样的大型网站仍然在努力解决这个问题(尽管程度较轻)。

我不知道这可以完全在JS中完成(如果有人知道，请编辑这个答案)，你可能需要一些后端代码。

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

在点击
设置1/2秒的定时器点击
计时器结束后，向后端页面发送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事件附加到复选框集合上，然后从click函数中更新total变量。
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);
});
如果你只是想看看它是否被点击，只需添加到总数。

如果你想计算刷新后的检查次数，你需要设置value on load

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--;
    });
});

相关内容

最新更新

热门标签：