实现Checkbox组单选/多选切换功能的技术咨询

需求：实现一个函数，调用MultipleCheckbox(0)时仅允许单选，调用MultipleCheckbox(1)时允许多选。先看你写的代码：

function MultipleCheckbox(elem){
        if (elem ==0){
           $('input[type="checkbox"]').on('change', function() {
               $('input[type="checkbox"]').not(this).prop('checked', false);
            });
            } else {
             $('input[type=checkbox]').each(function() {
                 $('input[type="checkbox"]').prop('checked', false);
              });
            }
         }

<table style="text-align: center;">
  <tbody>
     <tr style="text-align: center;">
          <td>
            <input type="checkbox" id="Monday" data-day="1" name="Monday" value="1" class="big-checkbox" />
             <label for="Monday">Mon</label>
           </td>
           <td>
           <input type="checkbox" id="Tuesday" data-day="2" name="Tuesday" value="2" class="big-checkbox" />
            <label for="Tuesday">Tues</label>
           </td>
           <td>
           <input type="checkbox" id="Wednesday" data-day="3" name="Wednesday" value="3" class="big-checkbox" />
           <label for="Wednesday">Wed</label>
           </td>
           <td>
           <input type="checkbox" id="Thursday" data-day="4" name="Thursday" value="4" class="big-checkbox" />
           <label for="Thursday">Thur</label>
           </td>
           <td>
           <input type="checkbox" id="Friday" data-day="5" name="Friday" value="5" class="big-checkbox" />
           <label for="Friday">Fri</label>
          </td>
     </tr>
  </tbody>
</table>

存在的问题 #

• 多选模式逻辑完全错误：你写的else分支只是把所有checkbox设为未选中，这和"允许多选"的需求完全不沾边，正确的做法应该是取消单选限制，而非清空选择。
• 事件重复绑定：每次调用MultipleCheckbox(0)都会给checkbox绑定一次change事件，多次调用后切换checkbox时会触发多次事件，导致逻辑混乱。
• 选择器范围过宽：直接用$('input[type="checkbox"]')会选中页面所有checkbox，若页面存在其他无关复选框，也会被这个函数影响，应该用你定义的.big-checkbox类精准定位目标组。

修正后的代码 #

function MultipleCheckbox(elem) {
  // 精准选择目标checkbox组
  const checkboxes = $('.big-checkbox');
  
  if (elem === 0) {
    // 先解绑之前的事件，避免重复绑定
    checkboxes.off('change');
    // 绑定单选逻辑：仅当前复选框选中时，取消其他复选框选中状态
    checkboxes.on('change', function() {
      if (this.checked) {
        checkboxes.not(this).prop('checked', false);
      }
    });
  } else {
    // 解绑单选事件，恢复多选能力
    checkboxes.off('change');
    // 可选：切换到多选时清空已选状态，不需要则删除此行
    // checkboxes.prop('checked', false);
  }
}

说明 #

1. 用.big-checkbox选择器精准定位需要控制的复选框组，避免影响页面其他元素。
2. 每次切换模式前先解绑之前的change事件，防止重复绑定导致的逻辑异常。
3. 单选模式下，仅在当前复选框被选中时取消其他复选框的选中状态，保留用户取消选中当前复选框的操作权限。
4. 多选模式下，只需解绑单选事件即可让复选框恢复原生多选功能，可根据需求决定是否清空已选状态。

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