Issue with unchecking a checked box ... being detected by oncheck as being checked

Webix JS
1

Hi Everyone: Code below allows you to check the checkboxes which adds the id to a list, but unchecking any checked box also adds multiple id already in the list. How do I: 1. ensure the list only has unique items 2. how to do remove an item that is being unchecked (even if it is the middle of the list)

Please be sure to use the HTML code: .striked{ text-decoration:line-through; }

var list = []; var toolbar = { view:"toolbar", elements:[ { view:"richselect", width:170, labelWidth:90, label: 'View Pages', labelAlign:"left", value:1, options:[ { id:1, value:"4" }, { id:2, value:"5" }, { id:3, value:"6" } ], on:{ onchange:function(){ pagerSize = this.data.text; $$("pagerA").define("size", pagerSize); $$("chk").refresh(); } } }, { view:"richselect", width:170, id:"batchAction", labelWidth:90, labelAlign:"left", value:1, options:[ { id:1, value:"" }, { id:2, value:"red background" }, { id:3, value:"green background" }, { id:4, value:"blue background" }, { id:5, value:"yellow background" } ], on:{ onchange:function(){ alert($$('batchAction').getText()); // if($$('batchAction').getValue() == 2) $$('chk').addRowCss(1, "red"); // if($$('batchAction').getValue() == 3) $$('chk').addRowCss(2, "green"); // if($$('batchAction').getValue() == 4) $$('chk').addRowCss(3, "blue"); // if($$('batchAction').getValue() == 5) $$('chk').addRowCss(4, "yellow"); } }

            },
            { view:"search", align:"right", placeholder:"Search by keyword", id:"searchfilter", width: 300}
          ]
  };

  var pagerData = {
    id:'pagerA',
    template:"{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
    container:"pager",
    size:4,
    group:5
  };
var grid = { view:"datatable",margin:50, id:"chk", columns:[ //checkbox column { id:"status",header:{ content:"masterCheckbox" }, checkValue:"on", uncheckValue:"off",template:"{common.checkbox()}", width:40,margin:100}, { id:"title",header:"Title", width:200}, { id:"year",header:"Year", width:200}

        ],
        on:{
          onCheck:function(id, col, status){ 
            //var list = [];
            if (status) { 
              list += id + ', ';
            }
            //else $(id, list).remove();
            arr = list.split(',');
// alert(arr.length-1); alert(arr); console.log(list); } }, autoheight:true, autowidth:true, multiselect:true, pager:pagerData, select:'row',

        data: [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"},
{ id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"}
] };

        webix.ui({
            container:"areaA",
            rows:[ toolbar, grid]
        })