复选框联动功能开发求助：实现指定自动选中逻辑

需求回顾 #

• 5个复选框，选中第1、2个时，第3个自动选中；若其中一个取消选中，第3个同步取消。
• 仅选中第4个复选框时，第5个自动勾选；若有其他复选框选中或第4个取消，第5个同步取消。

修改后的完整代码 #

HTML部分（保留原有结构，无需改动）

<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

<p class="m-input-label">Nurtec&nbsp;ODT home office emails</p>
<div class="m-checkbox-wrapper">
    <input type="checkbox" id="HCP_Nurtec_HomeOfficeAnnouncement_Emails" name="channel[]" data-group="" data-group-item="allNurtecHomeOfficeEmails" class="m-input-hidden"> 
    <label for="HCP_Nurtec_HomeOfficeAnnouncement_Emails">All Nurtec ODT announcement emails</label>
</div>
<div class="m-checkbox-wrapper">
    <input type="checkbox" id="HCP_Nurtec_HomeOfficeClinicalEducational_Emails" name="channel[]" data-group="" data-group-item="allNurtecHomeOfficeEmails" class="m-input-hidden"> 
    <label for="HCP_Nurtec_HomeOfficeClinicalEducational_Emails">All Nurtec ODT clinical and educational emails</label>
</div>
<div class="m-checkbox-wrapper">
    <input type="checkbox" id="allNurtecHomeOfficeEmails" name="channel[]" data-group="allNurtecHomeOfficeEmails" data-group-item="allBiohaven" class="m-input-hidden"> 
    <label for="allNurtecHomeOfficeEmails">All Nurtec ODT home office emails</label>
</div>

<hr class="m-hr" />

<p class="m-input-label">Nurtec&nbsp;ODT rep-delivered emails</p>
<div class="m-checkbox-wrapper">
    <input type="checkbox" id="HCP_Nurtec_RepDelivered_Emails" name="channel[]" data-group="" data-group-item="allBiohaven" class="m-input-hidden"> 
    <label for="HCP_Nurtec_RepDelivered_Emails">All Nurtec ODT rep-delivered emails</label>
</div>

<hr class="m-hr" />
<div class="m-checkbox-wrapper">
    <input type="checkbox" id="allBiohaven" name="channel[]" data-group="allBiohaven" data-group-item="" class="m-input-hidden"> 
    <label for="allBiohaven">All Nurtec ODT emails</label>
</div>

<button type="submit" class="m-button">unsubscribe</button>

JavaScript部分（调整联动逻辑，适配需求）

$(function() {
    // 保留原有邮箱验证规则
    $.validator.addMethod("emailtld", function(value, element) {
        return /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value);
    }, "Please enter a valid email address in the format: yourname@example.com");

    let form = $("#reg");
    if (!form) return;

    // 缓存复选框对象，简化后续调用
    const cb1 = $("#HCP_Nurtec_HomeOfficeAnnouncement_Emails");
    const cb2 = $("#HCP_Nurtec_HomeOfficeClinicalEducational_Emails");
    const cb3 = $("#allNurtecHomeOfficeEmails");
    const cb4 = $("#HCP_Nurtec_RepDelivered_Emails");
    const cb5 = $("#allBiohaven");
    const allCheckboxes = $("input[type='checkbox'][name='channel[]']");

    // 同步第3个复选框状态：仅当1、2都选中时勾选
    function updateCb3() {
        const isBothChecked = cb1.is(":checked") && cb2.is(":checked");
        cb3.prop("checked", isBothChecked);
        cb3.trigger("focusout");
    }

    // 同步第5个复选框状态：仅当第4个单独选中时勾选
    function updateCb5() {
        const isOnlyCb4Checked = cb4.is(":checked") && allCheckboxes.not(cb4).filter(":checked").length === 0;
        cb5.prop("checked", isOnlyCb4Checked);
        cb5.trigger("focusout");
    }

    // 监听1、2号复选框变化，同步3号和5号状态
    cb1.add(cb2).on("change", function() {
        updateCb3();
        updateCb5();
    });

    // 监听4号复选框变化，同步5号状态
    cb4.on("change", updateCb5);

    // 保留原有父项复选框的子项同步逻辑
    function getGroupItems(el) {
        return $(el).attr("data-group") ? $(`[data-group-item="${$(el).attr("data-group")}"]`) : null;
    }

    function checkAllGroupItems(el) {
        const items = getGroupItems(el);
        if (!items) return;
        items.prop("checked", true).each(function() {
            checkAllGroupItems(this);
        });
    }

    function uncheckAllGroupItems(el) {
        const items = getGroupItems(el);
        if (!items) return;
        items.prop("checked", false).each(function() {
            uncheckAllGroupItems(this);
        });
    }

    $("[data-group]").on("change", function() {
        const $this = $(this);
        if ($this.is(":checked")) {
            checkAllGroupItems(this);
        } else {
            uncheckAllGroupItems(this);
            updateCb3();
            updateCb5();
        }
    });

    // 保留原有表单验证逻辑
    form.validate({
        normalizer: function(value) {
            return $.trim(value);
        },
        errorElement: "p",
        errorClass: "has-error",
        validClass: "is-valid",
        onfocusout: function(element) {
            $(element).valid();
        },
        errorPlacement: function(error, element) {
            element.is(":checkbox") ? error.insertBefore('input[type="submit"]') : error.insertAfter(element);
        },
        rules: {
            "channel[]": { required: true }
        },
        messages: {
            "channel[]": { required: "Please select at least one channel to unsubscribe from" }
        }
    });

    // 保留复选框变化触发验证的逻辑
    allCheckboxes.on("change", function() {
        $(this).trigger("focusout");
    });

    // 初始化时同步所有复选框状态
    updateCb3();
    updateCb5();
});

关键逻辑说明 #

1. 1、2号联动3号：
   通过updateCb3函数判断1、2号是否同时选中，直接同步3号的选中状态，确保联动精准。
2. 仅4号选中时联动5号：
   updateCb5函数同时检查4号是否选中、其他复选框是否全未选中，满足双条件才勾选5号，适配需求中的“仅选中第4个”限制。
3. 保留原有父项复选框手动操作时的子项同步逻辑，不破坏原有功能；同时在父项状态变化后，重新触发联动检查，确保所有状态一致。

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