• 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
5 years ago

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

0
Paulo
Paulo
5 years ago

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

0
Steve
Steve
4 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

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz