Ractive.js get checked values checkbox into array

Question

I am trying to get values of checked in checkboxes and store in an array.Whenever any checkbox is clicked by user, I want to update the array with values of only checked checkboxes.How can I do?

<label>
  <input type='checkbox'>
  {{#if checked}}checked!{{else}}Circle{{/if}}
</label><br>
<label>
  <input type='checkbox'>
  {{#if checked}}checked!{{else}}Star{{/if}}
</label><br>
<label>
  <input type='checkbox'>
  {{#if checked}}checked!{{else}}Square{{/if}}
</label><br>
<label>
  <input type='checkbox'>
  {{#if checked}}checked!{{else}}Hexagon{{/if}}
</label><br>
<label>
  <input type='checkbox'>
  {{#if checked}}checked!{{else}}Triangle{{/if}}
</label><br>
<label>
  <input type='checkbox'>
  {{#if checked}}checked!{{else}}Polygon{{/if}}
</label>

Answer 1

You can bind an array variable to the name attribute of your checkboxes.

<div id="output"></div>
<script id="template" type="text/html">
    <input type="checkbox" name="{{ shapes }}" value="Circle" /> Circle<br/>
    <input type="checkbox" name="{{ shapes }}" value="Star" /> Star<br/>
    <input type="checkbox" name="{{ shapes }}" value="Square" /> Square<br/>
    <br/>
    Selected shapes: {{ shapes }}
</script>

<script type="text/javascript">
    new Ractive({
        template: "#template",
        el: "#output",
        data: {
            shapes: []
        }
    });
</script>

On JSFiddle