Jquery使用动态值单击函数

Question

I have a list of checkboxes which generate tables when checked. Each table has an All checkbox which when clicked selects all the options of the table. The all checkboxes are all referred to by the same class but have different ID s depending on the table. I am trying to write a code to get the ID of the generated table and use this ID in my select_all function which would allow the ALL checkbox to only affect its respective table's options.

What I currently have

ALL Checkbox

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

ALL Function

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

What I have tried

I tried to store the ALL checkbox ID in a variable and the use this variable to refer to the checkbox in my function like below:

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

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

This was not successful as it didn't even select all options of any table.

I also thought if writing a function that fetches the ID and calling the function when the DOM is loaded :

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

What's the best way to achieve what I want?

Answer 1

I guess you need something like this:

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

1. instead of click apply the change event.
2. when change event happens traverse up to the parent table (as you mentioned) .
3. find the checkboxes with :checkbox selector.
4. then apply the property checked if .tball is checked.

---

this.checked returns boolean as true if checked false if unchecked.

---

A short example is here:

 $(".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 2

Try this : find all tbl2 checkboxes inside div and make check / uncheck

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

Answer 3

You can try using JQuery's parent-child selector .

So, if you give each table a unique id, then you can select all checkboxes of a certain class like this:

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

Hope that helps.

Answer 4

You could try using jQuery Closest function.

If you have a table enclosing the checkboxes, the you can use closest to find the "nearest" table tag to your checkbox.

Once you have the handle to the table, everything else would seem easy, I suppose.