Question

我正在尝试向以下组件添加一些功能，基本上当用户点击父“li label checkbox”时，这应该检查/取消选中＆gt; “ul li label checkboxes”，问题是我使用标签来触发显示/隐藏下一个“ul”并且无法绑定另一个函数，理想的情节将如下：

点击li label {element}＆gt;滑下了下一个ul 点击li标签{Checkbox}＆gt;选中/取消选中下一个ul复选框childs

此时我创建了一个jsfiddle，无法更改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"));
      });

    });

Answer 1

尝试

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);
    });
}

演示：Fiddle

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

1 个答案: