h5实现全选
实现全选功能的方法
在H5中实现全选功能通常涉及HTML、CSS和JavaScript的配合。以下是几种常见的实现方式：
使用checkbox实现全选
在HTML中创建全选checkbox和多个子checkbox：
<input type="checkbox" id="selectAll">全选
<div class="item-list">
<input type="checkbox" class="item">选项1
<input type="checkbox" class="item">选项2
<input type="checkbox" class="item">选项3
</div>JavaScript处理全选逻辑：
document.getElementById('selectAll').addEventListener('change', function() {
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.checked = this.checked;
});
});处理子选项影响全选状态
当子选项发生变化时，需要同步更新全选状态：
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.addEventListener('change', function() {
const allChecked = [...items].every(item => item.checked);
document.getElementById('selectAll').checked = allChecked;
});
});使用jQuery简化实现
如果项目中使用了jQuery，代码可以更简洁：
$('#selectAll').change(function() {
$('.item').prop('checked', this.checked);
});
$('.item').change(function() {
$('#selectAll').prop('checked', $('.item').length === $('.item:checked').length);
});注意事项
确保checkbox的name属性正确设置，便于表单提交时获取选中值。对于动态加载的选项，需要重新绑定事件。移动端需要考虑触摸反馈和样式适配。
样式优化
可以添加CSS美化checkbox：
input[type="checkbox"] {
margin-right: 5px;
vertical-align: middle;
}以上方法提供了从基础到进阶的全选功能实现方案，可根据项目需求选择适合的方式。
