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>

Answer 2

在您链接的网站上，单击元素是

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

请尝试将id allmsgs设置为ID而不是输入（如果它在html中公开）。

我的javascript函数有问题吗？

2 个答案: