• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Binding Multiple Checkboxes To An Array In Aurelia

Aurelia 1 · July 11, 2016

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.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Paulo
Paulo
4 years ago

If only that worked. I click the checkboxes and nothing happens. It doesn’t check any box.

0
Paulo
Paulo
4 years ago

Never mind. I found the cause, it doesn’t have anything to with this. Sorry!

0
Steve
Steve
3 years ago

Is there any way to format the checkbox list? Like after 5 boxes, start a new column? Thanks for your help.

0

Primary Sidebar

Popular

  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How to Fast Launch Microsoft Flight Simulator 2020 (decrease game loading time)
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Perfectly Smoked Steak On A Charcoal BBQ Using Indirect Heat
  • Wild Natural Deodorant Review

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz