Binding Multiple Checkboxes To An Array In Aurelia

In an application recently I need to display several confirmation checkboxes and once all of these checkboxes had been ticked, a submit button would become enabled to be clicked.

You might already know how to do this, but you can bind multiple checkboxes to an array, they’ll be added and removed when a checkbox is clicked.

In your HTML template view, you might have something simple like this:

<div repeat.for="input of inputs" class="form-row">
    <input type="checkbox" value.bind="input.value" checked.bind="checkboxes">
    <label>${input.label}</label>
</div>

Then in your viewmodel, something like this:

export class MyViewModel {
    checkboxes = [];
    inputs = [
        {label: 'My Label 1', value: 'value1'},
        {label: 'My Label 2', value: 'value2'},
        {label: 'My Label 3', value: 'value3'},
        {label: 'My Label 4', value: 'value4'}
    ];
}

Now whenever a checkbox is clicked, the value of that checkbox will be added into the checkboxes array as a string. So if you click the first checkbox, your checkboxes array will have a string value added of value1

The beautiful thing about Aurelia is how simple it makes accomplishing tasks like binding multiple inputs to an array.