勾选/取消Any复选框后其他复选框无法单独操作的问题求助

问题分析 #

你给所有复选框都绑定了ValueAnyDisable函数，当点击品牌复选框时，函数会检查「Any」（Chk0）的状态：如果Chk0未勾选，就会把所有其他复选框的checked设为false，这直接导致你刚勾选的复选框立刻被取消，看起来毫无响应。

修复方案 #

修改函数逻辑，先判断当前触发点击的元素是不是「Any」复选框——只有点击「Any」时才执行全选/全不选操作；点击其他复选框时，同步更新「Any」的状态（比如所有品牌都选中时自动勾选Any，否则取消），核心是避免点击品牌框时强制清空选择。

修复后的JavaScript代码 #

function ValueAnyDisable(event) {
    const anyCheckbox = $('#Chk0');
    const otherCheckboxes = $('[id^=Chk]:not(#Chk0)');
    
    // 仅点击「Any」复选框时，执行全选/全不选逻辑
    if (event.target.id === 'Chk0') {
        otherCheckboxes.prop('checked', anyCheckbox.is(':checked'));
    } else {
        // 点击品牌复选框时，同步「Any」的选中状态
        const allBrandChecked = otherCheckboxes.filter(':checked').length === otherCheckboxes.length;
        anyCheckbox.prop('checked', allBrandChecked);
    }
}

同步修改HTML的onclick事件 #

需要给每个复选框的onclick传递事件对象，让函数能识别触发源：

<input type="checkbox" onclick="ValueAnyDisable(event)" id="Chk0" name="Test1" value="1"  />
Any  <br />
<input type="checkbox" onclick="ValueAnyDisable(event)" id="Chk1" name="Test1" value="12"  />
BMW <br />
<input type="checkbox" onclick="ValueAnyDisable(event)" id="Chk2" name="Test1" value="11"  />
FIAT <br />
<input type="checkbox" onclick="ValueAnyDisable(event)" id="Chk3" name="Test1" value="13"  />
Tesla  <br />
<input type="checkbox" onclick="ValueAnyDisable(event)" id="Chk4" name="Test1" value="54"  />
Toyota <br />
<input type="checkbox" onclick="ValueAnyDisable(event)" id="Chk5" name="Test1" value="44"  />
Ford <br />

效果说明 #

1. 操作「Any」复选框：勾选时所有品牌自动选中，取消时所有品牌自动取消；
2. 单独操作品牌复选框：可正常勾选/取消，且当所有品牌都选中时「Any」自动勾选，只要有一个品牌未选中，「Any」就自动取消。

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