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

Question

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

• 短信
  • 电子邮件

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

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

如果用户同时选择 SMS 和 EMAIL 复选框，则应选中 SMS 内容和电子邮件内容下的所有复选框

处理 SMS 和 EMAIL 选项卡的 JQuery 代码代码是 函数 handleChannelTabs 处理 Displaying Second Image with 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()
    }

问题似乎在 alert('Inside else MoveTemplates 10'); 和 alert('Inside else MoveTemplates 11');

The checked value is getting unchecked when more than 1 channels are selected.

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

以上说法正确吗？