I've been looking for a better way to count values of selected checkboxes in IE8, because at the moment it's painfully slow.
My issue is:
I have 60 checkboxes arranged in a grid Each checkbox has 4 values (each value represents a market segment) The user can check any of the checkboxes I need a running count of the totals for each segment at the bottom of the screen.
At the moment I have created 4 hidden checkboxes for each visible checkbox and the visible checkbox will "check" the corresponding hidden checkboxes when it clicked. Then I sum the hidden checkboxes.
This works nicely in Firefox and Chrome, but in IE8 it is painfully slow and I believe this is because IE8 has trouble "finding" each checkbox.
I have tried setting up variables to represent some of the checkboxes and I load these in the "$(document).ready" function, this helps but it simply means that the loading of the page takes a long time and I get the dreaded "This script is taking too long.." blah blah blah
Here's some of the functions I'm using, hopefully this gives you an idea of what I'm doing.
$('input.audienceGridCheckBox').click(function() {
// LinkValue is a attribute for each checkbox that links to the hidden checkboxes through a class I set them
CheckHiddenCheckboxes($(this).attr("linkValue"), $(this).attr('checked'));
//GetValues();
SetTotals();
});
function CheckHiddenCheckboxes(checkType, checkValue) {
var $IsAdded = -1;
if (checkValue) {
$IsAdded = 1;
}
$("." + checkType).each(function() {
if ($(this).attr('checked') != checkValue) {
$(this).attr('checked', checkValue);
switch ($(this).attr('Segment')) {
case 'I':
$InitialTotal += $IsAdded * Number($(this).val());
break;
case 'N':
$NonLoyalTotal += $IsAdded * Number($(this).val());
break;
case 'L':
$LoyalTotal += $IsAdded * Number($(this).val());
break;
case 'O':
$LapsedTotal += $IsAdded * Number($(this).val());
break;
}
}
})
function GetSegmentCount(type) {
var returnTotal = 0
//Get Initial Values
$("input[type=checkbox].audienceGridHidden" + type + ":checked").each(function() {
if ($(this).attr('checked'))
{
returnTotal += Number($(this).val());
}
});
return returnTotal;
}
I'm hoping someone may have a better approach, I wouldn't want to waste a few days on this and then find out that there's a better solution. (Apologies if there is, I'm new to JQuery) We're trying to avoid Ajax calls as it's potentially quite slow for some of our more remote customers.