javascript - Ractive.js 将选中的值复选框放入数组中

Question

我正在尝试获取选中复选框的值并将其存储在数组中。每当用户单击任何复选框时，我想仅使用选中复选框的值更新数组。我该怎么办？

<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

您可以将数组变量绑定(bind)到复选框的 name 属性。

<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