剔除中复选框列表的选中属性

Question

我有两个数组应该显示并显示为复选框列表。主要思想是单击第一个列表的元素以将元素添加到第二个列表。 html 代码如下所示

   <div class="tab-pane" id="ColumnHeading">
             <div class="row">
                 <div class="form-group span4">
                     <h4>Column Headings</h4>
                     <ul class="icons-ul" data-bind="foreach: staticItem.ColumnHeadingList.ColumnHeadingListItem" >
                         <li>
                             <div class="span2">
                                 <input class="selectedHeading" type="checkbox" data-bind=" click: $parent.myCheck, checkedInArray: $parent.Params.Item.ColumnHeadingList.ColumnHeadingListItem, attr: { value: Value }" />
                                 <span data-bind="text: Name"></span>
                             </div>
                         </li>
                     </ul>
                 </div>
                 <div class="form-group span4" style="margin-left: -90px; margin-top: 15px">
                     <div class="icons-ul" data-bind="foreach: Params.Item.ColumnHeadingList.ColumnHeadingListItem" >
                             <div class="span4">
                                 <input  type="checkbox" data-bind="customcheck: IntOnly" />

                             </div>
                     </div>
                 </div>
                 <div class="span6">
                     <p class="validationMessage" data-bind="validationMessage: Params.Item.ColumnHeadingList.ColumnHeadingListItem"></p>
                 </div>
             </div>

值"IntOnly"是两个复选框列表中每个对象的属性。

我的第一个复选框列表上的点击事件函数如下所示

  self.myCheck = (function(e) {
                    var index = self.staticItem.ColumnHeadingList.ColumnHeadingListItem().map(function(e) { return e.Value(); }).indexOf(this.Value());

                    if (self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly() !== "Y") {
                        self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("Y");
                        var o = self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index];
                        var flag = false;
                        for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) {

                            if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) {
                                flag = true;
                            }
                        }
                        if (flag == false || self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length == 0) {
                            var newObject = jQuery.extend(true, {}, this);
                            self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.push(newObject);

                        }
                    } else { //checked==true

                        self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("N");
                        for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) {

                            if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) {
                                self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.splice(i, 1);
                            }
                        }
                    }
                    return true;

                });

代码工作正常，可以将元素添加到第二个列表并将值保存在 IntOnly 上，因为 customcheck 函数检查 IntOnly 的值是 'Y' 对于 select 复选框，但我可以保存属性对于第一个列表，即使在获取该值时也是如此，并且在将表单发送到服务器并查看它们以进行编辑后 select 选中这些复选框。

请大家多多指教，语法错误

Answer 1

我做了一个非常简单的例子，一个复选框列表构建另一个。我认为你在这里想要的关键是 subscribe 到选中的变量，这样你就可以在它的值发生变化时采取行动（当它被选中或未被选中时）。

我的函数只检查值是真还是假，push是或remove是列表元素to/from第二个列表。方便的是，我可以为两个列表使用相同的数据项；我只是将复选框绑定到不同的成员变量，所以第二个列表复选框独立于第一个列表中的相应复选框。

let vm = {
  list1: [1, 2, 3].map((n) => {
    const result = {
      label: `op${n}`,
      intOnly: ko.observable(false),
      anotherCheckValue: ko.observable(false)
    };

    result.intOnly.subscribe((isChecked) => {
      if (isChecked) {
        vm.list2.push(result);
      } else {
        vm.list2.remove(result);
      }
    });

    return result;
  }),
  list2: ko.observableArray()
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach:list1">
  <label>
    <input type="checkbox" data-bind="checked: intOnly" />
    <span data-bind="text: label"></span>
  </label>
</div>
<div data-bind="foreach:list2">
  <label>
    <input type="checkbox" data-bind="checked: anotherCheckValue" />
    <span data-bind="text: label"></span>
  </label>
</div>

剔除中复选框列表的选中属性

Checked attribute for checkbox list in knockout

javascript

data-binding

checkbox

checked

knockout.js