如何使用JavaScript或JQuery重置复选框保存的选中值？

故障修复方案 #

问题根因 #

你的代码存在两处核心逻辑错误导致重置后选中状态没有清除：

• 复选框点击事件的赋值逻辑错误：现有代码直接将checkedDice数组的对应元素整体替换为布尔值，覆盖了原有的包含checked属性的对象结构，导致后续读取选中状态失效。
• 重置操作没有同步更新逻辑层的选中状态：你只把页面上的复选框UI改成了未勾选，但是没有把checkedDice数组里的checked属性重置为false，逻辑层还保留了之前的选中状态。

修复代码 #

1. 修正复选框点击事件的赋值逻辑

把原来的6个点击事件的赋值写法改成修改对象的checked属性：

$("#cdie1").click(function() {
  checkedDice[0].checked = !checkedDice[0].checked;
})
$("#cdie2").click(function() {
  checkedDice[1].checked = !checkedDice[1].checked;
})
$("#cdie3").click(function() {
  checkedDice[2].checked = !checkedDice[2].checked;
})
$("#cdie4").click(function() {
  checkedDice[3].checked = !checkedDice[3].checked;
})
$("#cdie5").click(function() {
  checkedDice[4].checked = !checkedDice[4].checked;
})
$("#cdie6").click(function() {
  checkedDice[5].checked = !checkedDice[5].checked;
});

2. 修正重置事件的逻辑，同步更新逻辑层选中状态

在$("#reset").click的回调里添加重置checkedDice数组checked属性的逻辑：

$("#reset").click(function() {
  alert("reset this");
  rollsRem = 3;
  var display = document.getElementById("rollsRem");
  display.innerHTML = rollsRem;
  // 先重置逻辑层的选中状态
  for(let i=0; i<checkedDice.length; i++){
    checkedDice[i].checked = false;
  }
  roll();
  // 再同步更新UI层的复选框状态
  $('input[type=checkbox]:checked').each(function() {
    $(this).prop('checked', false);
  });
});

修改完成后触发重置操作就能同时清空逻辑层和UI层的选中状态，不需要手动刷新页面。

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