显示选中复选框的JQuery代码逻辑不起作用

Question

我有一个名为Main Content的textArea，下面是两个复选框

• SMS
  • 电子邮件

当用户选择两个复选框，即短信和电子邮件时 SMS和EMAIL文本框都显示与主内容文本框相同的内容 具有SMS和EMAIL复选框的附加功能 短信内容与上述主要内容相同，电子邮件内容与上述主要内容相同。 请参考图1

当用户选择短信和电子邮件时，默认情况下应检查这两个用于SMS和EMAIL的复选框。 但是，无论EMAIL或SMS复选框选择的顺序如何，第一个选定的选项始终保留 “未选中与上述主要内容相同的短信/电子邮件内容”。 请参考下一张图片

如果用户选择了短信和电子邮件复选框，则应检查短信内容和电子邮件内容下的所有复选框

处理SMS和EMAIL标签的JQuery代码是 函数handleChannelTabs处理显示第二个Imgage的主要逻辑，同时选择了SMS和EMAIL

handleChannelTabs();
    $("[data-channel-checkboxes]").find("input[type=checkbox]").each(
            function() {
                var self = $(this)
                var contentDiv = $('[data-content-for=' + self.val() + ']')
                var checkedChannelsLength = $("[data-channel-checkboxes]").find(
                "input[type=checkbox]:checked").length;
                if (self.is(':checked')) {
                    if (checkedChannelsLength > 1) {
                        contentDiv.children().appendTo(
                                $('[data-tab-content-for=' + self.val()
                                        + ']'))
                    } else {
                        $('[data-tab-content-for=' + self.val() + ']')
                                .children().appendTo(contentDiv)
                    }
                }

            })

    $("[data-use-main]").find("input[type=checkbox]").change(function(){
        $this = $(this)
        if ($this.is(':checked')) {
            $this.parents('[data-template-for]').find('[data-main-message-content]').removeClass('hidden').find('.word-break').html($('[data-main-message]').find('textarea').val())
            $this.parents('[data-template-for]').find('[data-textare-content]').addClass('hidden').find('textarea').val('')
        } else {
            $this.parents('[data-template-for]').find('[data-textare-content]').removeClass('hidden').find('textarea').val($('[data-main-message]').find('textarea').val())
            $this.parents('[data-template-for]').find('[data-main-message-content]').addClass('hidden').find('.word-break').val('')
        }
    })

    function handleChannelTabs() {
        var checkedBoxes = [];
        var checkedChannelsLength = $("[data-channel-checkboxes]").find(
        "input[type=checkbox]:checked").length;
        $("[data-channel-checkboxes]").find("input[type=checkbox]:checked")
                .each(function() {
                    checkedBoxes.push($(this).val())
                    var self = $(this)
                    var contentDiv = $('[data-content-for=' + self.val() + ']')
                    if (self.is(':checked')) {
                        if (checkedChannelsLength > 1) {
                            contentDiv.children().appendTo(
                                    $('[data-tab-content-for=' + self.val()
                                            + ']'))
                        } else {
                            $('[data-tab-content-for=' + self.val() + ']')
                                    .children().appendTo(contentDiv)
                        }
                    }
                })
        var isFirstTab = true;
        $("[data-channel-content]").toggleClass('hidden', checkedBoxes.length < 2)
        $("[data-channel-content]").find('ul').find('li').each(
                function(index) {
                    var currentLi = $(this);
                    if (jQuery.inArray($(currentLi).find('a').html(),
                            checkedBoxes) >= 0) {
                        $(currentLi).removeClass('hidden')
                        if (isFirstTab) {
                            isFirstTab = false;
                            $(currentLi).addClass("active").css('margin-left', '20px').find('a').addClass("act-a");
                            $($('[data-tab-content-for]')[index]).removeClass('hidden')
                        } else {
                            $(currentLi).removeClass("active").css('margin-left', '0px').find('a').removeClass("act-a");
                            $($('[data-tab-content-for]')[index]).addClass('hidden')
                        }
                    } else {
                        $(currentLi).addClass('hidden')
                    }
                })
    } 

我添加了另一个代码，即

function moveTemplates(onLoad, $this) {
        alert('Inside MoveTemplates 01');
        var changedChannel = $this.val()
        alert('Inside MoveTemplates 02' + changedChannel);
        var divForCurrentChannel = $('[data-content-for=' + changedChannel
                + ']')
        var mainMessage = $('[data-main-message]').find('textarea').val()
        var checkedChannelsLength = $("[data-channel-checkboxes]").find(
                "input[type=checkbox]:checked").length;
        alert('Inside MoveTemplates 03' + checkedChannelsLength);
        if ($this.is(':checked')) {
            alert('Inside MoveTemplates 04');
            divForCurrentChannel.find('textarea[data-copy-main]').val(
                        mainMessage)
                        alert('Inside MoveTemplates 05');
            divForCurrentChannel.removeClass('hidden')
            alert('Inside MoveTemplates 06');
        } else {
            alert('Inside else  MoveTemplates 07');
            $('[data-tab-content-for=' + $this.val() + ']').children()
                    .appendTo(divForCurrentChannel)
                    alert('Inside else  MoveTemplates 08');
            divForCurrentChannel.addClass('hidden')
            alert('Inside else  MoveTemplates 09');
            }
        alert('Inside else  MoveTemplates 10');
        $('[data-use-main]').toggleClass('hidden', checkedChannelsLength < 2)
        alert('Inside else  MoveTemplates 11');
        handleChannelTabs()
        toggleMainAndTextArea()
    }

问题似乎是 在警报之间（'Inside else MoveTemplates 10'）; 和 alert（'Inside else MoveTemplates 11'）;

当选择了多个通道时，检查的值将被取消选中。

$('[data-use-main]').toggleClass('hidden', checkedChannelsLength < 2)

以上陈述是否正确？