Jquery 使用动态值的点击功能

Question

我有一个 checkboxes 的列表，检查时会生成 table。每个 table 都有一个 All checkbox，点击后 select 会显示 table 的所有选项。所有 checkboxes 都由相同的 class 引用，但根据 table 具有不同的 ID。我正在尝试编写代码来获取生成的 table 的 ID 并在我的 select_all 函数中使用此 ID，这将允许 ALL checkbox 仅影响其各自的table 的选项。

我目前拥有的

所有复选框

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

我试过的

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

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

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

这没有成功，因为它甚至没有 select 任何 table 的所有选项。

我还想过是否编写一个函数来获取 ID 并在加载 DOM 时调用该函数：

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

您可以尝试使用 JQuery 的 parent-child selector。

因此，如果您给每个 table 一个唯一的 ID，那么您可以 select 某个 class 的所有复选框，如下所示：

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

希望对您有所帮助。

Answer 2

您可以尝试使用 jQuery Closest 函数。

如果你有一个 table 包含复选框，你可以使用 closest 来找到你的复选框的 "nearest" table 标签。

一旦你掌握了 table，我想其他一切似乎都很容易。

Answer 3

我猜你需要这样的东西：

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

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

this.checked returns 布尔值 true 如果选中 false 如果未选中。

这里有一个简短的例子：

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

<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>

Answer 4

试试这个：在 div 中找到所有 tbl2 复选框并选中/取消选中

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

Jquery 使用动态值的点击功能

Jquery click function using a dynamic value

javascript

checkbox

jquery