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

Question

我正在尝试获取已选中复选框的值并存储在 array.Whenever 用户单击任何复选框，我想用仅已选中 checkboxes.How 的值更新数组我可以吗？

<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>

On JSFiddle

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

Ractive.js get checked values checkbox into array

javascript

arrays

checkbox

ractivejs