Jquery click function using a dynamic value

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

Jai · Accepted Answer · 2015-04-09 09:04:57Z

I guess you need something like this:

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

instead of click apply the change event.
when change event happens traverse up to the parent table (as you mentioned).
find the checkboxes with :checkbox selector.
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>

Bhushan Kawadkar · Accepted Answer · 2015-04-09 08:54:32Z

1

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

answered Apr 9, 2015 at 8:54

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

ralfe · Accepted Answer · 2015-04-09 08:52:54Z

0

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.

answered Apr 9, 2015 at 8:52

ralfe

1,4542 gold badges15 silver badges27 bronze badges

1 Comment

user3062358 Over a year ago

The tables are dynamically generated so I can't specify the IDs as per your suggestion.

Serendipity · Accepted Answer · 2015-04-09 08:53:43Z

0

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.

answered Apr 9, 2015 at 8:53

Serendipity

1,0371 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery click function using a dynamic value

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related