jquery复选框已检查计数问题

时间:2012-01-06 08:32:01

标签: javascript jquery html

我有一个如下表: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)

我想要完成的是当行复选框状态改变时,我需要计算同时检查的共享相同分支名称的复选框的数量。

实施例。如果我点击第一个复选框,(Branch1)我应该得到一个带有分支检查计数的弹出窗口,在这种情况下,它应该是2.

这是我的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);
    }
}); 

有什么想法吗?我被困了2天。谢谢!

2 个答案:

答案 0 :(得分:3)

我认为您应该为每个具有分支名称

的复选框应用标记
<input type="checkbox" class="payMe" branch="Branch1" ... />

然后该功能大致应该像

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

答案 1 :(得分:1)

你去:http://jsfiddle.net/8SEz2/2/

我将属性data-branch添加到复选框

这里是他的js:

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