写一个多行表单,每一行前有一个checkbox框,且有一个用jQuery对下面复选框的全选全不选反选操作的checkbox
时间: 2024-03-12 11:49:02 浏览: 105
表单checkbox多选框选择特效.zip
好的,以下是一个简单的多行表单,每一行前有一个checkbox框,并且有一个用jQuery对下面复选框的全选全不选反选操作的checkbox:
```html
<form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="select"></td>
<td>John Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td><input type="checkbox" name="select"></td>
<td>Jane Doe</td>
<td>jane@example.com</td>
</tr>
<tr>
<td><input type="checkbox" name="select"></td>
<td>Bob Smith</td>
<td>bob@example.com</td>
</tr>
</tbody>
</table>
<br>
<input type="checkbox" id="select-all"> Select All
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Select all checkbox
$('#select-all').click(function() {
$('input[name=select]').prop('checked', this.checked);
});
// Individual checkbox
$('input[name=select]').click(function() {
if (!this.checked) {
$('#select-all').prop('checked', false);
}
});
});
</script>
```
说明:
- 首先是一个表单元素,包含一个表格和一个全选的复选框。
- 表格包含两个表头列和多个表格行,每个表格行都有一个复选框。
- 最后是一个用于全选和取消全选的复选框。
- 在jQuery脚本中,我们使用`click()`方法来处理全选复选框和每个单独的复选框的单击事件。如果全选复选框被选中,则所有单独的复选框也会被选中。如果单独的复选框被取消选中,则全选复选框也会被取消选中。
阅读全文