How to uncheck all the checkbox by calling a function in the below dom-repeat

Question

Please help with this.

<div>
    <template is="dom-repeat" items="{{checkdata}}">
        <paper-checkbox on-tap="checkall" checked="{{item.checked}}"></paper-checkbox>
        <span>{{item.name}}</span>
    </template>
</div>

properties as

checkdata:{
    type: Array,
    value:[{name: 'Bike'},
         {name: 'Car'},
         {name: 'Cycle'},
         {name: 'Bus'},
         {name: 'Truck'}
        ],
}

function as

checkall: function() {
    var checkvalue = this.checkdata;
    var checktext = [];
    for (i = 0; i < checkvalue.length; i++) {
        if (checkvalue[i].checked==true) {
            checktext.push(checkvalue[i].name);
            this.checkeditem = checktext + " ";
        }
    }
}

Answer 1

Here is a sample of function that you may check or uncheck :

checkAll() { 
          let checkdata=[];
          this.checkdata.forEach((i,x)=> {
             checkdata.push({"name": i.name, "checked": true});

             if (x==this.checkdata.length-1){
               this.set('checkdata', checkdata);
               console.log(checkdata);
            }
          })

}

uncheckAll() {
         let checkdata=[];
          this.checkdata.forEach((i,x)=> {
             checkdata.push({"name": i.name, "checked": false});

             if (x==this.checkdata.length-1){
               this.set('checkdata', checkdata);
               console.log(checkdata);
            }
          })

}

Demo