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

您可以將數組變量綁定到復選框的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>

在JSFiddle上