勾选不同div下checkbox时触发alert提示选中项将被取消的实现问题

需求梳理 #

• 同一div（分组）内的checkbox可自由多选，无额外触发逻辑
• 跨分组勾选checkbox时，先弹出alert提示「your selected items will be unchecked」，再清空其他分组的已选中状态

原有代码问题分析 #

现有代码未做场景判断，只要任意checkbox状态发生变化就会弹出提示，且执行顺序为先清空其他分组选中项再弹提示，和需求的触发条件、执行顺序都不匹配。

修正后代码 #

JS逻辑 #

$("input:checkbox").on('change', e => {
  // 获取当前操作checkbox所属的分组
  const currentGroup = $(e.target).closest('div');
  // 判定其他分组是否存在已选中的checkbox
  const hasOtherChecked = currentGroup.siblings().find('input:checkbox:checked').length > 0;
  // 仅跨分组有选中项时触发提示和清空逻辑
  if (hasOtherChecked) {
    alert("your selected items will be unchecked");
    currentGroup.siblings().find('input:checkbox').prop('checked', false);
  }
});

配套HTML代码 #

<div class="dashboard">
  <div id="fr">
    <h3>Fruits</h3>
    <label>
  <input type="checkbox" name="check1" />Kiwi</label>
    <label>
  <input type="checkbox" name="check2" />Jackfruit</label>

  </div>
  <div id="an">
    <h3>Animals</h3>
    <label>
  <input type="checkbox" name="check1" />Tiger</label>
    <label>
 <input type="checkbox" name="check2" />Sloth</label>

  </div>

  <div id="veg">
    <h3>vegetables</h3>
    <label>
  <input type="checkbox" name="check1" />Broccoli</label>
    <label>
  <input type="checkbox" name="check2" />Carrots</label>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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