javascript - 按类选择所有复选框,类增量
问题描述
我有一个 html 表,它为每个主机增加类,以便每个主机和子主机具有相同的类,如下所示:
+-------------+--------------+
| host | child host |
+-------------+--------------+
| class=host0 | class=host0 |
+-------------+--------------+
| | class=host0 |
+-------------+--------------+
| | class=host0 |
+-------------+--------------+
| class=host1 | class=host1 |
+-------------+--------------+
| | class=host1 |
+-------------+--------------+
每个主机/子主机都有一个复选框。
<input class='host{$hostcount}'type='checkbox'>
我希望主机复选框选择所有子主机。下面的代码适用于 host0,我怎样才能让它适用于任何主机?
$(document).ready(function() {
$('.host0').change(function () {
if ($(this).prop('checked')) {
$('.host0:checkbox').prop('checked', true);
} else {
$('.host0:checkbox').prop('checked', false);
}
});
$('#selectAllHost').trigger('change');
});
解决方案
我会给他们父/子类,从类名中删除数字,然后为数字添加数据属性,以便您可以更轻松地定位它们。
$(document).ready(function() {
// change a parent checkbox
$('.host.parent').change(function() {
// grab the id and checked value
const id = $(this).data('id');
const checked = $(this).prop('checked');
// toggle all the children with the same id
$(`.host.child[data-id=${id}]`).prop('checked', checked ? true : false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>0<input class="host parent" data-id="0" type="checkbox" /></td>
<td><input class="host child" data-id="0" type="checkbox" /><input class="host child" data-id="0" type="checkbox" /></td>
</tr>
<tr>
<td>1<input class="host parent" data-id="1" type="checkbox" /></td>
<td><input class="host child" data-id="1" type="checkbox" /><input class="host child" data-id="1" type="checkbox" /></td>
</tr>
</table>
推荐阅读
- python - 如何检查列表的任何元素是否存在于django的arrayfield中?
- java - 如何防止自闭
在 XML 中? - ios - 如何在 ios swift 中创建类似于 gmail 的浮动文本字段?
- wordpress - 从 Apache 或 Wordpress 优雅地提供 MP4
- javascript - 如何创建跟随鼠标的圆圈轨迹?
- html - 为什么在移动设备上点击时会应用悬停样式?
- python - Tensorflow 1.14.0 C API TF_SessionRun 内存泄漏
- java - Eclipse 每次重新启动时都会将 Java 编译器合规性级别重置为 1.7
- javascript - Node 的 log4js 不输出到文件,只输出到控制台
- php - 如何将粗口响应变成对客户请求的响应?