我的javascript函数有问题吗？

Question

我写了 HTML 表格，其中每一行都有复选框。所以现在我想在我的标题中添加复选框，它将检查表中的所有复选框。我已经做到了，但它不起作用。任何的想法？

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

我也有javascript函数...

$(document).ready(function() {

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

它位于我的scripts.js文件中，此文件与 html 链接（链接不是问题，因为其他功能正在运行。

Answer 1

如果您添加jquery库，它会起作用:)

$(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>