使用jquery语言写出完整代码:1.点击全选复选框时,全选下面四个复选框,再点全选复选框时取消全选; 2.当鼠标进入表格和离开表格时,改变表格背景色,颜色自定义; 3.点击删除按钮时,判断是否有复选框被选中,如果没有复选框被选中则提示用户进行选择,否则确认删除,并从表格中删除相应行。
时间: 2024-03-17 22:42:44 浏览: 62
基于jquery实现复选框全选,反选,全不选等功能
5星 · 资源好评率100%
请注意,以下代码仅供参考,具体实现方式可能会因为页面结构、样式等而有所不同。
1. 点击全选复选框时,全选下面四个复选框,再点全选复选框时取消全选:
```
// HTML代码
<input type="checkbox" id="check-all" />
<label for="check-all">全选</label>
<br>
<input type="checkbox" class="check-item" />
<label for="">选项1</label>
<br>
<input type="checkbox" class="check-item" />
<label for="">选项2</label>
<br>
<input type="checkbox" class="check-item" />
<label for="">选项3</label>
<br>
<input type="checkbox" class="check-item" />
<label for="">选项4</label>
// jQuery代码
$(function() {
$('#check-all').on('click', function() {
if ($(this).prop('checked')) {
$('.check-item').prop('checked', true);
} else {
$('.check-item').prop('checked', false);
}
});
});
```
2. 当鼠标进入表格和离开表格时,改变表格背景色,颜色自定义:
```
// HTML代码
<table id="my-table">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
// jQuery代码
$(function() {
$('#my-table').on('mouseenter', 'tr', function() {
$(this).css('background-color', '#f5f5f5');
}).on('mouseleave', 'tr', function() {
$(this).css('background-color', '#fff');
});
});
```
3. 点击删除按钮时,判断是否有复选框被选中,如果没有复选框被选中则提示用户进行选择,否则确认删除,并从表格中删除相应行。
```
// HTML代码
<table id="my-table">
<tr>
<td><input type="checkbox" class="check-item" /></td>
<td>内容1</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check-item" /></td>
<td>内容2</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check-item" /></td>
<td>内容3</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check-item" /></td>
<td>内容4</td>
<td><button class="delete-btn">删除</button></td>
</tr>
</table>
// jQuery代码
$(function() {
$('.delete-btn').on('click', function() {
var checked = $('.check-item:checked');
if (checked.length === 0) {
alert('请先选择要删除的行!');
} else {
if (confirm('确认删除选中的行吗?')) {
checked.closest('tr').remove();
}
}
});
});
```
阅读全文