如何在Twig生成页面中实现按批次批量勾选Checkbox功能

第一步：优化Twig模板的元素标记 #

给全选框和子复选框添加通用类名和批次号数据属性，避免依赖动态生成的复杂类名，让JS更容易定位元素：

全选Checkbox的Twig代码：

<div class="custom-control custom-checkbox">
    <input id="checkButtonLot{{ currentProduct.lotNumber }}" type="checkbox"
        class="custom-control-input js-lot-select-all js-checkable"
        name="checkButtonLot{{ currentProduct.lotNumber }}" 
        value="{{ currentProduct.lotNumber }}"
        data-lot-number="{{ currentProduct.lotNumber }}">
    <label class="custom-control-label" for="checkButtonLot{{ currentProduct.lotNumber }}"></label>
</div>

子产品Checkbox的Twig代码：

<div class="custom-control custom-checkbox">
    <input id="checkButtonLotsub_product{{ sub_product.rankId }}_{{currentProduct.lotNumber}}" type="checkbox"
        class="custom-control-input js-lot-item js-checkable"
        name="checkButtonLotsub_product{{ sub_product.rankId }}_{{currentProduct.lotNumber}}"
        value="{{ sub_product.id }}_{{ sub_product.rankId }}_{{currentProduct.lotNumber}}"
        data-lot-number="{{ currentProduct.lotNumber }}">
    <label class="custom-control-label"
        for="checkButtonLotsub_product{{ sub_product.rankId}}_{{currentProduct.lotNumber}}"></label>
</div>

第二步：重写JavaScript逻辑 #

利用data-lot-number属性精准匹配对应批次的子复选框，实现批次内的全选/取消全选：

// 获取所有批次全选框
const lotSelectAllCheckboxes = document.querySelectorAll('.js-lot-select-all');

// 给每个全选框绑定点击事件
lotSelectAllCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('click', handleLotSelectAll);
});

function handleLotSelectAll() {
    const lotNumber = this.dataset.lotNumber;
    // 获取当前批次下的所有子复选框
    const lotItems = document.querySelectorAll(`.js-lot-item[data-lot-number="${lotNumber}"]`);
    
    lotItems.forEach(item => {
        item.checked = this.checked;
        // 同步自定义选中类（如果需要）
        if (this.checked) {
            item.classList.add('checked');
        } else {
            item.classList.remove('checked');
        }
    });

    // 执行原有的取消全局全选逻辑
    deselectButtonAll();
}

关键改进点说明 #

• 用data-lot-number直接存储批次号，不需要从value或类名中拆分，避免解析错误
• 通用类名js-lot-select-all和js-lot-item让JS定位元素更简洁，不依赖动态生成的类名
• 使用querySelectorAll替代getElementsByClassName，返回静态NodeList，避免动态集合的潜在问题
• 逻辑更清晰：点击全选框→获取批次号→筛选对应子复选框→统一设置选中状态

内容的提问来源于stack exchange，提问作者Tall_gnome