Question

我有几个动态复选框组（ul＆gt; li＆gt;复选框＆gt; ul＆gt; li＆gt;复选框），如果未选中子项，则需要更改父级的检查状态，或者如果仅选中一个子项则需要更改不确定状态。如果未选中父级，但是需要将每个组绑定在一起但是与其他组分开，我已经取消了检查孩子的工作。孩子正在取消选中组列表中的顶级父项。

HTML

<div class="form-group">
   <ul>
      <li ng-repeat="state in filtersController.filtersModel().states">
         <input type="checkbox" name="{{state.displayName}}" id="{{state.displayName}}" class="parent" ng-checked="true" ng-model="state.selected" ng-change="filtersController.filterChanged(state)">
         <label for="{{state.displayName}}">{{state.displayName}}</label>
             <ul>
                 <li ng-repeat="county in filtersController.filtersModel().counties">
                  <div ng-show="displayCounties(county, state)">
                     <input type="checkbox" name="{{county.displayName}}" id="{{county.displayName}}" class="child" ng-checked="true" ng-model="county.selected" ng-change="filtersController.filterChanged(county)">
                     <label for="{{county.displayName}}">{{county.displayName}}</label>
                  </div>
               </li>
            </ul>
         </li>
      </ul>
   </div>

JS

this.getChecked = function () {
    $('input[type=checkbox]').change(function () {
    // parent unchecked will uncheck children
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    $(this).closest('ul').find('ul li input[type=checkbox][class=parent]').first().prop('indeterminate', $(this).is(':checked'));
});

$('li :checkbox').on('click', function () {
    var $chk = $(this),
    $li = $chk.closest('li'),
    $ul, $parent;
    if ($li.has('ul')) {
        $li.find(':checkbox').not(this).prop('checked', this.checked);
    }
do {
    $ul = $li.parent();
    $parent = $ul.siblings(':checkbox');
    if ($chk.is(':checked')) {
        $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length === 0);
    } else {
        $parent.prop('checked', false);
    }
        $chk = $parent;
        $li = $chk.closest('li');
    } while ($ul.is(':not(.someclass)'));
    });
};

我使用AngularJS作为我的数据结构，使用jQuery与复选框进行交互。

Answer 1

一旦您开始考虑首先使用数据模型，您将看到仅使用角度更容易。

简化的HTML

<!-- note ng-checked and ng-model don't go together -->
<input type="checkbox" ng-model="state.selected" 
       ng-change="filtersController.parentChange('state',state)">

    <ul>
      <li ng-repeat="county in filtersController.counties">
        <input type="checkbox" ng-model="county.selected" 
               ng-change="filtersController.childChanged('counties')">
        <label for="{{county.displayName}}">{{county.displayName}}</label>

      </li>
    </ul>

控制器（未经测试）

var vm = this;
vm.parentChange = parentChange;
vm.childChanged = childChanged;

function parentChange(type, parent) {
  var children
  if (type === 'state') {
    children = vm.counties;
  }
  // when parent changes ... all children get same state as parent
  children.forEach(function(item) {
    item.selected = parent.selected
  });
}

function childChanged(type) {
  var parent, childGroup, allChecked;

  if (type === 'counties') {
    parent = vm.state;
    childGroup = vm.counties;
    // when child changes see if any are left unchecked in group
    allChecked = !childGroup.filter(function(item) {
      return !item.selected
    }).length; 
    // parent dependent on all children checked or not
    parent.selected = allChecked;
  }
}

控制器关心DOM的最终结果是什么，DOM由控制器中的数据模型驱动

如何更改父级复选框组

1 个答案: