Question

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

    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');

这是一个工作小提琴：

＆＃13;
＆＃13;
$(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); }
＆＃13;
th { background-color: silver } td { text-align: center }
＆＃13;
<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.
＆＃13;
＆＃13;
＆＃13;

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

不更改状态的复选框不需要获取其Click事件处理程序调用者。由于您坚持对此进行评论，并且我未能说服您这在概念上是错误的，因此您可以使用.triggerHandler（而非.trigger）在所点击列的所有复选框上调用事件处理程序 - 但没有任何真正的点击模拟。

同样，这不是最佳做法：

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

这是一个工作小提琴：

＆＃13;
＆＃13;
$(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); }
＆＃13;
th { background-color: silver } td { text-align: center }
＆＃13;
<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.
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/d9x95q2q/1/

＆＃13;

$(document).on("click", ".checkAll", function () {
     var cbody = $(this);
     var theader = cbody.parent();
     var column = theader.index() + 1;
		 $('.col' + column ).prop('checked', $(this).is(':checked'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

<thead>
  <tr>
    <th>
      col 1 <input type="checkbox" class="checkAll" />
    </th>
    <th>
      col 2 <input type="checkbox" class="checkAll" />
    </th>
    <th>
      col 3 <input type="checkbox" class="checkAll" />
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      <input type="checkbox" class="col1" />
    </td>
    <td>
      <input type="checkbox" class="col2" />
    </td>
    <td>
      <input type="checkbox" class="col3" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="col1" />
    </td>
    <td>
      <input type="checkbox" class="col2" />
    </td>
    <td>
      <input type="checkbox" class="col3" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="col1" />
    </td>
    <td>
      <input type="checkbox" class="col2" />
    </td>
    <td>
      <input type="checkbox" class="col3" />
    </td>
  </tr>
</tbody>
</table>

＆＃13;

Answer 3

它会在下一栏中显示您的点击触发器试试这个：

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

   var cbody = $(this),
   theader = cbody.parent(),

   // index already makes the +1 for you
   column = theader.index();

   var td_set = $("#tbody td:nth-child(" + column + ") input");
   td_set.prop("checked", this.checked);

   td_set.trigger('click');      
});

句子$("input:checkbox[name='productGroupWiseCustomer']").trigger('click');会在您的表格中触发新点击，然后检查下一列。

<强>更新
现在，代码触发了针对设置为已选中的每个复选框的单击。

Jquery Trigger触发了错误的表列

3 个答案:

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