CODEWITHSUNDEEP
checkboxbindingradio-buttonaurelia
Bjørn
Bjørn

Reputation: 1148

Dynamic radio/checkbox solution in Aurelia

I have a gist demonstrating my problem here:

https://gist.run/?id=e2ccd5925e383f2fc36ad277c31bcf23

The checkbox version works fine, if you remove a check, it updates the model right, but if you change the selected radio button, it will keep the true value on the radio that got it's selection removed. If I remove the model.bind="true" value, it will write "on" instead of true. I do want true/false, and not on/off.

I want the object to get it's property updated to be a true or false depending on if it's chosen or not, dynamically. In my scenario I don't know how many radio buttons or checkboxes will need to be selected. I only know that in the cases of it not being a collection, I only want one, and in the case that it is a collection, I want an unknown number selected.

Upvotes: 1

Views: 454

Answers (2)

classicalConditioning
classicalConditioning

Reputation: 655

Like the other answer mentions - <input type="checkbox"> behavior is different from <input type="radio">.

I have forked your gist and made the following changes to make your scenario with the radio button work in aurelia:

1) Added a function to the first object in your params collection called selectedChanged(it doesn't have to be there, could be on the viewmodel class instead, perhaps a better place for it). It is responsible for handling selection change in the radio button group, specifically it will iterate over a collection of options (second parameter), and set selected property to true on the option who's id matches the first parameter of the function, and to false on all other options.

2) There is an event on the input called change, I delegate it to a function called selectedChanged mentioned above, passing the option.id value and options as parameters.

https://gist.run/?id=5f38414fde799dfc145fc1291d9f2fd3&sha=f12283b08bfb45e77b8280d46a3709b6ccb82768

Upvotes: 2

bigopon
bigopon

Reputation: 1964

I think what you want to achieve (turning individual value on/off) is not achievable with radio, as the way it works (select a single value out of a set) is different with check-box (turning individual value on/off) (MDN reference). So If you truly want to have radio like appearance, with check-box behavior, consider employing some CSS and extra DOM elements to make it look like so, and behave like so.

Upvotes: 0

Related Questions