views:

117

answers:

0

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.