0

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.

7
  • "but it does not work" meaning what, exactly? I mean, do you have errors on the console, for example? Dec 18, 2019 at 14:46
  • when i check the checkbox in thead, it does not check all in tbody
    – Martin M
    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
    Dec 18, 2019 at 14:47
  • 1
    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
    Dec 18, 2019 at 14:47
  • 1
    @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
    Dec 18, 2019 at 15:02

2 Answers 2

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>

9
  • 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
    – Martin M
    Dec 18, 2019 at 14:53
  • @MartinM it literally works in the link you're provided. What browser are you using? Dec 18, 2019 at 14:58
  • Chrome... Version 79.0.3945.79 and i also try on Edge but same
    – Martin M
    Dec 18, 2019 at 14:59
  • 1
    I see your problem, I try to find the problem cant promise anything Dec 18, 2019 at 15:02
  • Can you console.log(this.checked) inside the each ? check if it logs anything Dec 18, 2019 at 15:06
-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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.