javascript - Jquery 触发器触发了错误的表列

Question

我有一个动态生成的表，其中有许多具有相同名称和单击事件的复选框。我在每一列中使用“全部”复选框，它将检查该列中的所有复选框。 代码是 ***动态生成的复选框

    if (discountProductGroupBuyer != null)
    {
    sb.Append("<td><input name=productGroupWiseCustomer id='" + "GetProduct" + customerGroup + "' type=checkbox checked=true value=mlb onclick=GetProduct('" + customerGroup + "') ></td>");
    }

****单击生成的复选框

   function GetProduct(ids) {
    debugger;
   var str = ids;
   var temp = [];
   temp.length = 0;
   temp = str.toString().split('-');

var addOrDelete = ""; 
var checkboxid = "#GetProduct" + ids;
if ($(checkboxid).is(":checked")) {
    addOrDelete = true;
    var flag = 0;
    $.grep(ProductGroupID, function (item, idx) {
        if (item.DiscountTypeId == temp[0] && item.BuyerId == temp[1] && item.ProductGroupId == temp[2]) {
            //ProductGroupID.splice(idx, 1);
            item.DiscountTypeId = temp[0];
            item.BuyerId = temp[1];
            item.ProductGroupId = temp[2];
            item.AddOrDelete = addOrDelete;
            flag = 1;
        }
    });
    if (flag == 0) {
        ProductGroupID.push({
            DiscountTypeId:temp[0],
            BuyerId:temp[1],
            ProductGroupId:temp[2],
            AddOrDelete:addOrDelete
        });
    }
}
else {
    addOrDelete = false;
    flag = 0;
    $.grep(ProductGroupID, function(item, idx) {
        if (item.DiscountTypeId == temp[0] && item.BuyerId == temp[1] && item.ProductGroupId == temp[2]) {
            //ProductGroupID.splice(idx, 1);
            item.DiscountTypeId = temp[0];
            item.BuyerId = temp[1];
            item.ProductGroupId = temp[2];
            item.AddOrDelete = addOrDelete;
            flag = 1;
        }
    });
    if (flag == 0) {
        ProductGroupID.push({
            DiscountTypeId:temp[0],
            BuyerId:temp[1],
            ProductGroupId:temp[2],
            AddOrDelete:addOrDelete
        });
    }
}

}

*** 检查所有代码

$(document).on("click", "#chkAll", function () {

    var cbody = $(this),
    theader = cbody.parent(),
    column = theader.index() + 1;
    $("#tbody td:nth-child(" + column + ") input").prop("checked", this.checked);

});

这似乎有效并且检查了该特定列中的所有复选框 就像下图一样。

但是添加触发事件后问题就出现了。让我解释一下

我还有一个触发器单击事件，仅通过单击该特定列的所有复选框来触发该事件。问题是，当我单击 #chkAll 复选框时，它不会触发该特定列，而是触发其他列复选框。

$(document).on("click", "#chkAll", function () {

     var cbody = $(this),
     theader = cbody.parent(),
     column = theader.index() + 1;
     $("#tbody td:nth-child(" + column + ") input").prop("checked", this.checked);
     $("input:checkbox[name='productGroupWiseCustomer']").trigger('click');      

});   

我试图通过单击单个列的 #chkAll 复选框来实现这一目标，它只会触发该列下的复选框。需要帮助。感谢帮助

我还添加了一张照片。

Answer 1

据我了解，您不仅希望(取消)检查整列复选框，还希望由于此操作而更改的复选框，以执行其事件处理程序。使用 prop 时不会发生第二个要求。您可以链接调用trigger，但请注意，这将再次切换检查。

解决方案是仅选择列中需要切换复选框的复选框(可能不是全部)，然后对这些复选框调用 .trigger("click")。这将更改其检查状态并调用相应的事件处理程序。

以下是您可以执行的操作:

$("#tbody td:nth-child(" + column + ") input"
             + (this.checked ? ":not(:checked)" : ":checked").trigger('click');

这是一个工作 fiddle :

$(document).on("click", ".chkAll", function () {
    var cbody = $(this),
        theader = cbody.parent(),
        column = theader.index() + 1;
    $("#tbody td:nth-child(" + column + ") input"
             + (this.checked ? ":not(:checked)" : ":checked")).trigger('click');
});

// Dummy click handler just to give visual clue that it gets called
function GetProduct(input) {
    $(input).fadeOut(100).fadeIn(100);
}

th { background-color: silver }
td { text-align: center }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<th>Noodles<br><input class="chkAll" type="checkbox"></th>
<th>Detergent<br><input class="chkAll" type="checkbox"></th>
<th>Chocolate<br><input class="chkAll" type="checkbox"></th>
</tr>
<tbody id="tbody">
<tr>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
</tr>
<tr>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
</tr>
<tr>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
</tr>
</tbody>
</table>
The fickering of the checkboxes is intentional: it is evidence of the click handlers being invoked.

调用所有复选框的事件处理程序

不更改状态的复选框不需要获取其单击事件处理程序调用者。由于您坚持在这一点上发表评论，而我未能说服您这在概念上是错误的，因此您可以使用 .triggerHandler (而不是 .trigger)来调用事件单击列的所有复选框上的处理程序 - 但没有模拟任何实际的单击。

再次强调，这不是最佳实践:

$("#tbody td:nth-child(" + column + ") input").prop("checked", this.checked))
    .each(function() {
        $(this).triggerHandler('click');
    });

这是一个工作 fiddle :

$(document).on("click", ".chkAll", function () {
    var cbody = $(this),
        theader = cbody.parent(),
        column = theader.index() + 1;
    $("#tbody td:nth-child(" + column + ") input").prop("checked", this.checked)
        .each(function() {
            $(this).triggerHandler('click');
        });
});

// Dummy click handler just to give visual clue that it gets called
function GetProduct(input) {
    $(input).fadeOut(100).fadeIn(100);
}

th { background-color: silver }
td { text-align: center }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<th>Noodles<br><input class="chkAll" type="checkbox"></th>
<th>Detergent<br><input class="chkAll" type="checkbox"></th>
<th>Chocolate<br><input class="chkAll" type="checkbox"></th>
</tr>
<tbody id="tbody">
<tr>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
</tr>
<tr>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
</tr>
<tr>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
<td><input name="productGroupWiseCustomer" type="checkbox" onclick="GetProduct(this)"></td>
</tr>
</tbody>
</table>
The fickering of the checkboxes is intentional: it is evidence of the click handlers being invoked.