javascript - 我的javascript函数有问题吗?
问题描述
我编写了 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 链接(链接不是问题,因为其他功能正在运行。
解决方案
如果您添加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>
推荐阅读
- flutter - 根据 ListView 的大小将 ListView 放入/取出 Expanded
- flutter - 如何在构造函数体内调用 super ?
- c# - 如何在 C# 中创建和返回匿名 JSON 对象
- linux - 制作 PIE 对象时不能使用 .data'
- android - Android APP Bundles apk 无法通过 bundletool 安装(INSTALL_PARSE_FAILED_NO_CERTIFICATES)
- arrays - 将多列堆叠为一列而不忽略空白单元格
- swift - 未触发 Combine 中的 CombineLatest
- ruby-on-rails - 仅遍历持久对象
- css - SVG 转换滞后于 firefox
- git - 为什么我已经添加了 git remote add 后需要在本地分支上设置上游?