Question

I have a table that looks like this: http://jsfiddle.net/8SEz2/4/

Branch    StSeq#   Inv#  Invoice Date    Payable Amount     Pay?
Branch1     2       A2   11/11/2011        49,500.00       checkbox(unchecked)
Branch1     3       A3   11/11/2011        12,221.55       checkbox(checked)
Branch3     4       B1   11/11/2011        12,220.56       checkbox(unchecked)

What I’m trying to accomplish is when a row checkbox state is changed I need to count the number of checkboxes that are also checked that share the same branch name.

Ex. If I click on the first checkbox, (Branch1) I should get a popup with the branch checked count and in this case, it should be 2.

This is my jquery:

//Please refer to the jsFiddle for the class names
//used to track checked branches
$('input.payMe').change(function() {
    if ($(this).is(':checked')) {
    //cm enable
    var branchName = $(this).parent().prevAll("td.invoiceBranch").html().trim();
    var branchCount = 0;
    $('td.invoiceBranch').each(function(index) {
        if ($(this).html().trim() == branchName) {
            branchCount++;
        }
    });
        alert(branchCount);
    }
    else {
    //cm disable
        var branchName = $(this).parent().prevAll("td.invoiceBranch").html().trim();
        var branchCount = 0;
        $('td.invoiceBranch').each(function (index) {
            if ($(this).html().trim() == branchName) {
                //Needs to select the checkbox to get checked state.
                //Not sure if this is correct
                var inputHTML = $(this).nextAll("td.paymentCheckBox").first();
                if($(inputHTML).is(":checked")) {
                    branchCount++;
                }
            }
        });      
        alert(branchCount);
    }
}); 

Any ideas? I’ve been stumped for 2 days. Thanks!

Answer 1

I think you should apply a tag for each checkbox with the name of branch

<input type="checkbox" class="payMe" branch="Branch1" ... />

Then the function should roughly be like

$(':checkbox.payMe').change(function() {
  alert($(':checkbox.payMe[branch="' + $(this).attr('branch') + '"]:checked').length);
});