0

This code of mine is NOT working. What is it that i am doing wrong?

$("#checkall").click(function () {
    $("input", myTable.fnGetNodes()).each(function () {                    
        $("input", myTable.fnGetNodes()).prop("checked", this.checked);
    });                            
});


It seems the current value of this inside .each function cannot have the property checked. Where am i going wrong?

This is my markup

<table class="table display" id="userviewtable">
            <thead>
                <tr>
                    <th id="checkall"><input type="checkbox" /></th>
                    <th>User ID</th>
                    <th>User Name</th>
                    <th>Staff ID</th>

                </tr>
            </thead>

            <tfoot>
            <tr>
                <th><input type="checkbox" /></th>
                <th>User ID</th>
                <th>User Name</th>
                <th>Staff ID</th>

            </tr>
            </tfoot>
        </table>

And on the script side i have the following:

var myTable=$("#userviewtable").dataTable(); //to initialize my table with data
 $("#checkall").click(function () {
        $("input", myTable.fnGetNodes()).each(function () {                    
            $("input", myTable.fnGetNodes()).prop("checked", this.checked);
        });                            
    });

Thank you

NetizenKing
  • 95
  • 1
  • 11
  • possible duplicate of [Checking a checkbox with jQuery?](http://stackoverflow.com/questions/426258/checking-a-checkbox-with-jquery) – A. Rama Dec 19 '14 at 12:57
  • you cannot use this here as this represent input in mytable. – Manoj Sharma Dec 19 '14 at 12:58
  • You don't need the `each` loop, remove it and your code should work as expected. BTW, use onchange event, not onclick – A. Wolff Dec 19 '14 at 12:59
  • What is `myTable.fnGetNodes()`? – Manwal Dec 19 '14 at 13:00
  • `this` in your function might not be what you expect it to be. – xlecoustillier Dec 19 '14 at 13:00
  • `Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers.` – A. Wolff Dec 19 '14 at 13:17
  • Problem between chair and keyboard. You have a `checkbox` for this specific purpose, yet you are checking `th` for clicks. – Salman A Dec 20 '14 at 16:19

2 Answers2

1

Your code should be:

$("#checkall").change(function () {
    $("input", myTable.fnGetNodes()).prop("checked", this.checked);
});
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • That is not working. Have tried that too. Am using jQuery 2.1.1 and datatables 1.10. Thank you – NetizenKing Dec 19 '14 at 13:11
  • You should provide online sample which replicates your issue. I guess `$("input", myTable.fnGetNodes())` returns empty object (i'm not a dataTable user so don't know what to expect here). Or maybe `#checkall` isn't a checkbox. So whithout seeing all relevant HTML markup, it is hard to help you more... BTW, you have to debug it on your side, is the change event fired? What returns `$("input", myTable.fnGetNodes())`? Etc... `That is not working` doesn't suffice as an issue explaination – A. Wolff Dec 19 '14 at 13:15
  • Wen i substitute this.checked with "checked" or true, all checkboxes on my table are checked. The problem is it is NOT getting deselected, or unchecked when i uncheck my header checkbox. Thank for your suppport. – NetizenKing Dec 19 '14 at 13:26
  • Then i'm confused, it should deselect it too. So when trying to deselect it, what is value of `this.checked`? – A. Wolff Dec 19 '14 at 13:28
  • objectHTMLInputElement that is the value of this – NetizenKing Dec 19 '14 at 13:37
  • I'm not asking the value of `this` BUT of `this.checked`, true or false??? Anyway, if you don't post online sample replicating your issue, we are just loosing our time here. And please learn how to debug javascript, using your console not alert box – A. Wolff Dec 19 '14 at 13:40
0

Without knowing what the program is supposed to achieve it is difficult to know what it is you need to know. However hopefully this helps.

The value of this within the each function would have the value of the element matched by $("input", myTable.fnGetNodes()).

If you want the value of the element matched by $("#checkall"), then you can assign this to a var outside of the each function.

You are also matching $("input", myTable.fnGetNodes()) twice. The each will apply it's function parameter to each element matched in the selection.

As an alternative to using this within the each function, it is possible to provide parameters to the function passed to each, the first one being an index, and the second one being the individual element matched.

$("#checkall").click(function () {
    var checked = this.checked;
    $("input", myTable.fnGetNodes()).each(function (ind,ele) {                    
        $(ele).prop("checked", checked);
    });                            
});

The each is not strictly necessary if you want to apply the same simple action to every element matched, as the function will be applied to every element matched:

$("#checkall").click(function () {
    $("input").prop("checked", this.checked);
});
Robert
  • 133
  • 1
  • 6