Question

我有一个checkboxes列表，它会在选中时生成表格。每个表都有一个全checkbox，点击后选择表的所有选项。所有checkboxes都由同一个类引用，但具有不同的ID s，具体取决于表。我正在尝试编写代码来获取生成的表的ID，并在我的select_all函数中使用此ID，这将允许ALL checkbox仅影响其各自的表的选项。< / p>

我目前拥有什么

所有复选框

<div class="Row">
        <div id="topRow">
            <input type="checkbox" name="tbl" class="tblall" id="all<?php echo $tables_index;?>" value="" />
            <p >ALL</p>
        </div>

所有功能

$(function () {
    $(document).on("click", (".tblall"), function () {
        var className = $("input:checkbox[name='tbl2']").attr('class');
        if (this.checked) {
            // Iterate each checkbox    
            $('.' + className).each(function () {
                this.checked = true;
            });
        } else {
            $('.' + className).each(function () {
                this.checked = false;
            });
        }
    });
});

我尝试了什么

我尝试将ALL复选框ID存储在变量中，并使用此变量来引用我的函数中的复选框，如下所示：

  some function (){
    var allID = $(".tball").attr('id');
    store allID;
}
$(function () {
     var allID = window.sessionStorage.getItem("allID");

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

这不成功，因为它甚至没有选择任何表格的所有选项。

我还想过，如果在加载DOM时编写一个获取ID并调用函数的函数：

function all_Id() {
    var allID;
    if ($("input:checkbox[name='tbl[]']:checked")) {
        allID = $("input:checkbox[name='tbl']").attr('id');
    }
    return allID;
}
$(document).ready(function () {
    all_Id();
});
$(document).ajaxComplete(function () {
    all_Id();
});

实现我想要的最佳方式是什么？

Answer 1

我猜你需要这样的东西：

$(".tblall").on('change', function () {
    $(this).closest('table').find(':checkbox').prop('checked', this.checked);
});

而不是click应用change事件。
当change事件发生时，遍历到父table （如您所述）。
找到checkboxes :checkbox选择器。
然后应用属性checked。

this.checked

true

false

这里有一个简短的例子：

＆＃13;

$(".tblall").on('change', function() {
  $(this).closest('table').find(':checkbox').prop('checked', this.checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td><input type='checkbox' class='tblall' />.tblall</td></tr>
  <tr><td><input type='checkbox' /></td></tr>
  <tr><td><input type='checkbox' /></td></tr>
  <tr><td><input type='checkbox' /></td></tr>
  <tr><td><input type='checkbox' /></td></tr>
  <tr><td><input type='checkbox' /></td></tr>
</table>

＆＃13;

Answer 2

试试这个：找到div中的所有tbl2复选框并进行检查/取消选中

$(function () {
    $(document).on("change", ".tblall", function () {
        $(this).closest(".Row").find("input:checkbox[name='tbl2']").prop('checked',$(this).is(':checked'));
    });
});

Answer 3

您可以尝试使用JQuery＆＃39; parent-child selector。

所以，如果你给每个表一个唯一的id，那么你可以选择某个类的所有复选框，如下所示：

$("#table1 > .checkbox-class").each(function () {
    this.checked = true;
});

希望有所帮助。

Answer 4

您可以尝试使用jQuery Closest功能。

如果您有一个包含复选框的表格，您可以使用最近的表格来查找复选框中最近的表格标签。

一旦掌握了桌子，我想其他一切看起来都很简单。

Jquery使用动态值单击函数

4 个答案: