如何实现多选checkbox选中值的动态展示与移除

你的问题出在原函数只处理单个复选框的状态，每次更新都会覆盖之前的内容，自然没法维护多个选中值的状态。直接修改函数逻辑，每次触发事件时重新收集所有选中的复选框值即可：

修改后的完整代码 #

<input onchange="selectArr(this)" type="checkbox" name="accessory" value="a"/>
<input onchange="selectArr(this)" type="checkbox" name="accessory" value="b"/>
<input onchange="selectArr(this)" type="checkbox" name="accessory" value="c"/>

<div id="acc"></div>

<script>
function selectArr(cb) {
    // 获取所有name为accessory且被选中的复选框
    const checkedBoxes = document.querySelectorAll('input[name="accessory"]:checked');
    // 提取每个选中框的value，转成数组
    const selectedValues = Array.from(checkedBoxes).map(item => item.value);
    // 把数组转成字符串（用逗号分隔，可自定义分隔符），无选中时为空
    document.getElementById("acc").innerHTML = selectedValues.join(', ');
}
</script>

逻辑说明 #

1. 每次复选框状态变化时，重新查询所有已选中的目标复选框，而不是只处理当前触发的那一个
2. 用Array.from把查询到的DOM集合转成数组，再通过map提取每个选中框的value
3. 用join把值数组拼接成可读性好的字符串，比如用逗号加空格分隔，也可以换成<br>实现换行展示
4. 最后把拼接好的内容赋值给目标div，这样不管是勾选还是取消勾选，都会实时更新所有选中值的展示

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