Javascript 将函数事件绑定到更改函数的复选框/标签

我正在尝试向以下组件添加一些功能，基本上，当用户单击parent li label复选框时，这应该选中/取消选中>ul li label复选框，问题是我正在使用标签触发显示/隐藏下一个ul，并且无法绑定另一个功能，理想的escenario如下所示：

单击li标签{element}>向下滑动到下一个ul 单击li标签{Checkbox}>选中/取消选中下一个ul复选框

此时我创建了一个html标记，无法更改：/

$(document).ready(function(){

      function dropdown() {
        $("#sidebarNav label").not("input[type='checkbox']").on('change', function (e) {
          if (jQuery(this).parent().has("ul")) {
            e.preventDefault();
          }      

          $(this).next('ul').slideToggle('fast');
          $(this).find('i').toggleClass('ion-plus ion-minus');

          //console.log(this);

          if (jQuery(this).hasClass('has-dropdown')) {
            $(this).find('input').prop('checked', true);
            //var item = $(this).find('input');
            //console.log(item);
          }

          var checkbox = $(this).find('input').is(":checked");
          //console.log(checkbox);
          if(checkbox) {
              //console.log("checked.");
          } else {
              //console.log("unchecked.");
          }

        });


      } dropdown();

      $("#checkAll").change(function () {
        $("input:checkbox").prop('checked', $(this).prop("checked"));
      });

    });

试一试

---

演示：

Hello@arun该功能看起来更好更干净，我有一个问题。。如果子ul不可见，基本上菜单不会像下面那样折叠。有没有办法防止子ul在只点击复选框时折叠？@user1547007抱歉，我没听清楚-嗨@Arun，当您第一次单击父项时，应折叠面板并从+-，向左切换图标，并保持复选框处于选中状态，一旦下拉列表可见，并且如果有子项，用户可以选中/取消选中仅单击复选框elem parent li checkbox选中/取消选中子复选框，或者用户可以单独执行此操作，但这不应折叠面板。如果用户单击标签块而不是check元素，这将折叠左图标的下拉列表和切换+-类，这有意义吗？我更新了JSFIDLE样式，我发送了invite@ARU这是带有样式的原始代码，缺少的功能是在仅单击复选框以单独选中/取消选中时，以及在菜单中添加了每组复选框时

function dropdown() {
    $("#sidebarNav li").has("ul").find(' > label input').on('change', function (e) {
        var $ul = $(this).parent().next();
        $ul.slideToggle('fast');
        $ul.find('input').prop('checked', this.checked);
        $(this).prev('i').add($ul.find('i')).toggleClass('ion-plus', this.checked).toggleClass('ion-minus', !this.checked);
    });
}