Javascript 如何使用移除图标在输出div中显示子类别复选框标签，并在取消选中时移除它，反之亦然

我有一个带有子类别的类别列表。用户只能从类别中选择一个子类别。我想在带有移除图标的输出div中显示所选子类别，当单击移除时，应将其从输出列表中移除，并取消选中相同的子类别

<div class="category-output">
   <ul>
   </ul>
</div>
<ul class="main-category-check">
     <li>
          <p>
              <label>
                  <input type="checkbox" class="filled-in categoryCheck"
                                                                name="season2" />
                                                            <span>Category 1</span>
                 </label>
        </p>
     <ul class="sub-category-check">
            <li>
                 <p>
                     <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 1</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 2</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 2</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 2</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 2</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <p>
                                                        <label>
                                                            <input type="checkbox" class="filled-in categoryCheck"
                                                                name="season2" />
                                                            <span>Category 2</span>
                                                        </label>
                                                    </p>
                                                    <ul class="sub-category-check">
                                                        <li>
                                                            <p>
                                                                <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 1</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 2</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <p>
                                                        <label>
                                                            <input type="checkbox" class="filled-in categoryCheck"
                                                                name="season2" />
                                                            <span>Category 3</span>
                                                        </label>
                                                    </p>
                                                    <ul class="sub-category-check">
                                                        <li>
                                                            <p>
                                                                <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 1</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>
                                                                    <input type="checkbox" class="filled-in"
                                                                        name="season2" />
                                                                    <span>Sub Category 2</span>
                                                                </label>
                                                            </p>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>

$('.sub-category-check li input').click(function () {
  if ($(this).is(':checked')) {
    $(this).parents('p').parent().siblings().find('input').prop('checked', false).attr('disabled', true);
    var Check1 = $(this).siblings('span').text();
    $('.category-output ul').append('<li class="chip">' + Check1 + '<i class="close material-icons">close</i>' + '</li>');
  }
  else {
    $(this).parents('p').parent().siblings().find('input').attr('disabled', false);
    $('.category-output ul li').remove();
    //$('.category-output ul').append('<li class="chip">' + Check1 + '<i class="close material-icons">close</i>' + '</li>');
  }
}
);

---

将此脚本替换为此脚本。它将按照您的要求工作

功能移除a，b { var x=document.getElementsByClassNamesub-category-check； var r=x[b].querySelectorAll'input[name=season2]； forlet j=0；j 第1小类

次级类别2

次级类别2

次级类别2

次级类别2

第2类

第1小类

次级类别2

第3类

第1小类

次级类别2

---

请添加您的代码JSFIDLE，并提供您尚未创建的链接。append li的类别输出div，因此请为此创建div。哦，很抱歉，我在此处粘贴了错误的div。因此，请在此处发布正确的html div，并使用正确的classHi Kaushal更新输出div，感谢您的回答，当我们单击“关闭”图标时，其应取消选中“相关”复选框。@Angaddy好的，我会很快返回您的解决方案。@Angaddy我会根据您的要求更新答案。你能检查一下它是否对你有用吗？