How to put multiple checkboxes into an observable array

3,000 views
Skip to first unread message

Sergey

unread,
Jan 25, 2011, 1:00:24 AM1/25/11
to KnockoutJS
I have multiple checkboxes and I'd like to put them all into an
observableArray rather then creating an observable for each checkbox.
Could someone point me into the right direction please?
<h1>Funding</h2>
<div class="question">
<h3>How will you finance your business? (select all that
apply)</h3>
<div><input type="checkbox" value="personal" data-bind="value:
financeOptions" /> My own captial</div>
<div><input type="checkbox" value="owners" data-bind="checked:
financeOptions" /> Only the owners will contribute capital</div>
<div><input type="checkbox" value="friendsAndFamily" data-
bind="checked: financeOptions" /> Loans from friends/family</div>
<div><input type="checkbox" value="bank" data-bind="checked:
financeOptions" /> Bank/SBA loan</div>
<div><input type="checkbox" value="outsideInvestors" data-
bind="checked: financeOptions" /> Outside investors (sell shares/
ownership interest)</div>
<div><input type="checkbox" value="venture" data-
bind="checked: financeOptions" /> Venture capital</div>
</div>
<button type="submit" data-bind='enable: financeOptions().length >
0'>Next</button>

<script type="text/javascript">

var viewModel = {
ownerNum: ko.observable(""),
ownerType: ko.observable("")
};
viewModel.financeOptions = ko.observableArray([]);
viewModel.addFinanceOption = ko.observable(Item);

function Item(value, somethingelse) {
alert('test');
};

ko.applyBindings(viewModel);

</script>

This does not work...

Thanks!

Steven Sanderson

unread,
Jan 25, 2011, 4:21:50 AM1/25/11
to knockoutjs
Hi Sergey

Try this for a working example based on your code: http://jsfiddle.net/AvFRK/

Notes:
  • This functionality (using checkboxes as flags to control whether items appear in an array) was only added in a very recent build, so make sure you get that build from https://github.com/SteveSanderson/knockout/tree/master/build/output
  • Make sure you use the "checked" binding consistently - some of the checkboxes in your code used "value" instead of "checked"
  • Not sure what you were doing with the addFinanceOption function or the "Item" function. If you want to run custom model logic whenever items are added or deleted, you can subscribe to the "financeOptions" observableArray.
Hope this helps!
Steve

Sergey

unread,
Jan 25, 2011, 1:13:50 PM1/25/11
to KnockoutJS
Awesome! Thank you Steve that works!

On Jan 25, 1:21 am, Steven Sanderson <st...@codeville.net> wrote:
> Hi Sergey
>
> Try this for a working example based on your code:http://jsfiddle.net/AvFRK/
>
> <http://jsfiddle.net/AvFRK/>Notes:
>
>    - This functionality (using checkboxes as flags to control whether items
>    appear in an array) was only added in a very recent build, so make sure you
>    get that build from
>    https://github.com/SteveSanderson/knockout/tree/master/build/output
>    - Make sure you use the "checked" binding consistently - some of the
>    checkboxes in your code used "value" instead of "checked"
>    - Not sure what you were doing with the addFinanceOption function or the
>    "Item" function. If you want to run custom model logic whenever items are
>    added or deleted, you can subscribe to the "financeOptions" observableArray.
>
> Hope this helps!
> Steve
>
Reply all
Reply to author
Forward
0 new messages