Is there problem with my javascript function?

Question

I wrote HTML table in which i have checkbox for every row. So now i want to add checkbox in my header which will check all check boxes in the table. I have done it, but it does not work. Any idea?

<table class="table table-hover table-inbox">
    <thead>
        <tr>
            <th>
                <input type="checkbox" class="i-checks" id="allmsgs">
            </th>
            <th>Sender</th>
            <th>Message</th>
            <th>Last Message</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="">
                <input type="checkbox" name="1" class="i-checks msg">
            </td>
            <td><a href="#">Jeremy Massey</a></td>
            <td><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></td>
            <td class="mail-date"><a href="#">12/12/2019 15:35</a></td>
        </tr>
        <tr class="unread active">
            <td class="">
                <input type="checkbox" name="2" class="i-checks msg">
            </td>
            <td><a href="#">Marshall Horne</a></td>
            <td><a href="#">Praesent nec nisl sed neque ornare maximus at ac enim.</a></td>
            <td class="mail-date">12/12/2019 15:35</td>
        </tr>
        <tr>
            <td class="">
                <input type="checkbox" name="3" class="i-checks msg">
            </td>
            <td><a href="#">Grant Franco</a></td>
            <td><a href="#">Etiam maximus tellus a turpis tempor mollis.</a></td>
            <td class="mail-date">12/12/2019 15:35</td>
        </tr>
    </tbody>
</table>

I have also javascript function ...

$(document).ready(function() {

    $('#allmsgs').click(function(event) {
        if(this.checked) {
            $('.msg').each(function() {
                this.checked = true;
            });
        } else {
            $('.msg').each(function() {
                this.checked = false;
            });
        }
    });
});

which is located in my scripts.js file and this one is linked with html (link is not the problem because other functions are working.

"but it does not work" meaning what, exactly? I mean, do you have errors on the console, for example? — Federico klez Culloca
– Federico klez Culloca, Commented Dec 18, 2019 at 14:46
when i check the checkbox in thead, it does not check all in tbody — Martin M
– Martin M, Commented Dec 18, 2019 at 14:47
Have you also linked to a copy of jQuery? That code won't work without it, and there's no mention you're using jQuery in your question/tags. — Andy
– Andy, Commented Dec 18, 2019 at 14:47
Define "does not work". In what way does it fail? Are there any errors on the browser's development console? When you use the browser's script debugger, do your jQuery selectors find the element(s) you expect? What does the code do when you debug? — David
– David, Commented Dec 18, 2019 at 14:47
@MartinM: The element being clicked on your page is not an <input type="checkbox"> as shown in the code here. It would appear that you have other code which is replacing that element with something else. So your click event isn't being triggered. Consult the documentation for whatever plugin you're using and how to respond to events. — David
– David, Commented Dec 18, 2019 at 15:02

Webdeveloper_Jelle · Accepted Answer · 2019-12-18 14:48:16Z

6

It works if you add the jquery library :)

$(document).ready(function() {

    $('#allmsgs').click(function(event) {
        if(this.checked) {
            $('.msg').each(function() {
                this.checked = true;
            });
        } else {
            $('.msg').each(function() {
                this.checked = false;
            });
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover table-inbox">
    <thead>
        <tr>
            <th>
                <input type="checkbox" class="i-checks" id="allmsgs">
            </th>
            <th>Sender</th>
            <th>Message</th>
            <th>Last Message</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="">
                <input type="checkbox" name="1" class="i-checks msg">
            </td>
            <td><a href="#">Jeremy Massey</a></td>
            <td><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></td>
            <td class="mail-date"><a href="#">12/12/2019 15:35</a></td>
        </tr>
        <tr class="unread active">
            <td class="">
                <input type="checkbox" name="2" class="i-checks msg">
            </td>
            <td><a href="#">Marshall Horne</a></td>
            <td><a href="#">Praesent nec nisl sed neque ornare maximus at ac enim.</a></td>
            <td class="mail-date">12/12/2019 15:35</td>
        </tr>
        <tr>
            <td class="">
                <input type="checkbox" name="3" class="i-checks msg">
            </td>
            <td><a href="#">Grant Franco</a></td>
            <td><a href="#">Etiam maximus tellus a turpis tempor mollis.</a></td>
            <td class="mail-date">12/12/2019 15:35</td>
        </tr>
    </tbody>
</table>

answered Dec 18, 2019 at 14:48

Webdeveloper_Jelle

2,8705 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Martin M Over a year ago

I already have a linked jQuery library... but still not work online <script src="js/vendor/jquery-1.12.4.min.js"></script> facility-management.devsolution.mk/account/all-messages.html

Vladimir Bogomolov Over a year ago

@MartinM it literally works in the link you're provided. What browser are you using?

Martin M Over a year ago

Chrome... Version 79.0.3945.79 and i also try on Edge but same

Webdeveloper_Jelle Over a year ago

I see your problem, I try to find the problem cant promise anything

Webdeveloper_Jelle Over a year ago

Can you console.log(this.checked) inside the each ? check if it logs anything

|

DarkBee · Accepted Answer · 2019-12-18 15:31:06Z

-1

From the site you linked the clicked element is

<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>

Try, setting the id allmsgs to it instead of the input, if it is exposed in the html.

edited Dec 18, 2019 at 15:31

DarkBee

14.5k9 gold badges83 silver badges132 bronze badges

answered Dec 18, 2019 at 15:10

Vladimir Bogomolov

1,79414 silver badges20 bronze badges

Collectives™ on Stack Overflow

Is there problem with my javascript function?

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related