剔除中復選框列表的選中屬性

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”是復選框兩個列表內的每個對象的屬性。

我的復選框第一個列表上的click事件的函數如下所示

  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 cuz customcheck函數上，檢查IntOnly的值是否為“ Y”以選中復選框，但是即使在獲取該屬性時，也可以將其保存為第一個列表值，然后在將表單發送到服務器后選中那些復選框，並查看它們進行編輯。

一些建議，請為語法感到抱歉。

Answer 1

我舉了一個非常簡單的示例，其中一個復選框構建了另一個列表。 我想在這里想要的關鍵是subscribe checked變量，以便當其值更改時（無論是選中還是未選中）都可以采取措施。

我的函數只是檢查值是true還是false，然后push list元素push第二個列表或從第二個列表中remove 。 方便地，我可以為兩個列表使用相同的數據項。 我只是將復選框綁定到其他成員變量，所以第二個列表復選框獨立於第一個列表中的相應復選框。

 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>