Checked attribute for checkbox list in knockout

Question

I have two arrays that should to be displayed and shown as a list of checkbox. The main idea is click on element of the first list for add the element to the second list. The html code looks like this

   <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>

The value "IntOnly" is a property of each object inside of the two lists of checkbox.

my function for the click event on the first list of checkbox looks like this

  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;

                });

the code is working fine for add the element to the second list and save the value on IntOnly cuz customcheck function check that value for IntOnly be 'Y' for select the checkbox but I can save that property for the first list even when is getting that value and selected those checkbox after the form is send to the server and see them for editing.

Some advises please, and sorry for the grammar.

Answer 1

I made a very simple example of one list of checkboxes building another. The critical thing I think you want here is to subscribe to the checked variable so you can take action when its value changes (when it is checked or unchecked).

My function just checks whether the value is true or false and pushes or removes the list element to/from the second list. Conveniently, I can use the same data items for both lists; I just bind the checkbox to a different member variable, so the second list checkbox is independent of the corresponding checkbox in the first list.

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>