如何将复选框控制代码复用至Allergies和Conditions字段集

需求说明 #

现有代码仅实现了Allergies字段集的复选框互斥逻辑：选中「No Allergies」时取消其他过敏选项，选中任意过敏选项时取消「No Allergies」。需要修改代码，让同样的逻辑无需重复编写，就能同时作用于新增的Conditions字段集。

修改方案 #

步骤1：给字段集添加通用类 #

给两个字段集容器添加共同的checkbox-group类，方便统一选择和处理：

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

<!-- 新增checkbox-group类 -->
<div class="allergies checkbox-group">
    <div class="gchoice gchoice_2_20_1">
        <input class="gfield-choice-input" name="input_20.1" type="checkbox" value="No Allergies" checked="checked" id="choice_2_20_1">
        <label for="choice_2_20_1" id="label_2_20_1">No Allergies</label>
    </div>
    <div class="gchoice gchoice_2_20_2">
        <input class="gfield-choice-input" name="input_20.2" type="checkbox" value="Beef" id="choice_2_20_2">
        <label for="choice_2_20_2" id="label_2_20_2">Beef</label>
    </div>
    <div class="gchoice gchoice_2_20_3">
        <input class="gfield-choice-input" name="input_20.3" type="checkbox" value="Chicken" id="choice_2_20_3">
        <label for="choice_2_20_3" id="label_2_20_3">Chicken</label>
    </div>
    <div class="gchoice gchoice_2_20_4">
        <input class="gfield-choice-input" name="input_20.4" type="checkbox" value="Dairy" id="choice_2_20_4">
        <label for="choice_2_20_4" id="label_2_20_4">Dairy</label>
    </div>
    <div class="gchoice gchoice_2_20_5">
        <input class="gfield-choice-input" name="input_20.5" type="checkbox" value="Fish" id="choice_2_20_5">
        <label for="choice_2_20_5" id="label_2_20_5">Fish</label>
    </div>
</div>
<br><br>
<!-- 新增checkbox-group类 -->
<div class="conditions checkbox-group">
    <div class="gchoice gchoice_2_18_1">
        <input class="gfield-choice-input" name="input_18.1" type="checkbox" value="No Conditions" checked="checked"
            id="choice_2_18_1">
        <label for="choice_2_18_1" id="label_2_18_1">No Conditions</label>
    </div>
    <div class="gchoice gchoice_2_18_2">
        <input class="gfield-choice-input" name="input_18.2" type="checkbox" value="Anxiety" id="choice_2_18_2">
        <label for="choice_2_18_2" id="label_2_18_2">Anxiety</label>
    </div>
    <div class="gchoice gchoice_2_18_3">
        <input class="gfield-choice-input" name="input_18.3" type="checkbox" value="Arthritis" id="choice_2_18_3">
        <label for="choice_2_18_3" id="label_2_18_3">Arthritis</label>
    </div>
    <div class="gchoice gchoice_2_18_4">
        <input class="gfield-choice-input" name="input_18.4" type="checkbox" value="Cancer" id="choice_2_18_4">
        <label for="choice_2_18_4" id="label_2_18_4">Cancer</label>
    </div>
    <div class="gchoice gchoice_2_18_5">
        <input class="gfield-choice-input" name="input_18.5" type="checkbox" value="Cataracts" id="choice_2_18_5">
        <label for="choice_2_18_5" id="label_2_18_5">Cataracts</label>
    </div>
</div>

步骤2：编写通用化的JS逻辑 #

将原有的单组逻辑封装，遍历所有字段集绑定事件，确保逻辑复用：

// 遍历所有带checkbox-group类的字段集
$('.checkbox-group').each(function() {
    var $currentGroup = $(this);
    // 获取当前组内的「无选项」复选框（第一个选项）
    var $noneOption = $currentGroup.find('.gchoice:first-child .gfield-choice-input');
    // 获取当前组内的其他所有选项复选框
    var $otherOptions = $currentGroup.find('.gchoice:not(:first-child) .gfield-choice-input');

    // 绑定「无选项」的勾选事件：选中时取消其他选项
    $noneOption.change(function() {
        if (this.checked) {
            $otherOptions.prop('checked', false);
        }
    });

    // 绑定其他选项的勾选事件：选中任意一个时取消「无选项」
    $otherOptions.change(function() {
        if (this.checked) {
            $noneOption.prop('checked', false);
        }
    });
});

逻辑说明 #

• 通过通用类checkbox-group统一识别需要处理的字段集，避免硬编码单个容器类名
• 遍历每个字段集时，仅处理当前组内的元素，确保不同字段集的逻辑互不干扰
• 后续新增同类字段集时，只需给容器添加checkbox-group类，即可自动应用相同的互斥逻辑，无需修改JS代码

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