How to display values if checkbox is checked on paper-dialog using dom-repeat

Question

How to display values if a checkbox is checked in paper-dialog using dom-repeat.In the console it is printing as an array. I want the same on paper-dialog. Any Suggestions? I have done single-binding and double binding for checktext but it is only showing one value for multiple check-box ticks.

Polymer({
  is: 'check-list',
  properties: {
    checkdata: {
      type: Array,
      value: [{
        name: 'Bike',
        checked: false
      }, {
        name: 'Car',
        checked: false
      }, {
        name: 'Cycle',
        checked: false
      }, {
        name: 'Bus',
        checked: false
      }, {
        name: 'Truck',
        checked: false
      }],
    },
  },
  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;
      }
    }
    console.log(checktext);
  }
});

<base href="https://polygit.org/polymer+polymer+v1.11.2/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-checkbox/paper-checkbox.html" />

<check-list></check-list>

<dom-module id="check-list">
  <template>
    <template is="dom-repeat" items="{{checkdata}}">
      <paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox>
    </template>
  </template>
</dom-module>

Answer 1

If I've understood the problem it's that checkeditem doesn't update correctly? I think this is because you have it inside our for loop. if you move it outside it should work fine.

Polymer({
  is: 'check-list',
  properties: {
    checkdata: {
      type: Array,
      value: [{
        name: 'Bike',
        checked: false
      }, {
        name: 'Car',
        checked: false
      }, {
        name: 'Cycle',
        checked: false
      }, {
        name: 'Bus',
        checked: false
      }, {
        name: 'Truck',
        checked: false
      }],
    },
  },
  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;
  }
});

<base href="https://polygit.org/polymer+polymer+v1.11.2/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-checkbox/paper-checkbox.html" />

<check-list></check-list>

<dom-module id="check-list">
  <template>
    <template is="dom-repeat" items="{{checkdata}}">
      <paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox>
    </template>
  <ul>
    <template is="dom-repeat" items="{{checkeditem}}">
        <li>{{item}}</li>
      </template>
  </ul>
  </template>
</dom-module>

Also while I'm here you could simplify your checkall function to this

checkall: function() {
  let checktext = [];
  for (let checkvalue of this.checkdata) {
    checkvalue.checked && checktext.push(checkvalue.name);
  }
  this.checkeditem = checktext;
}

Hope you find this useful 🙂