How to write value of a checkbox to a span when checked?

Question

Using knockoutJs, when either one of my checkboxes is checked, I want it to output a value to a <span> text, like so

-webkit-transition: <span data-bind="text: menuEffect"></span> 0.2s ease-in-out;
-moz-transition: <span data-bind="text: menuEffect"></span> 0.2s ease-in-out;
transition: <span data-bind="text: menuEffect"></span> 0.2s ease-in-out;

My checkboxes:

<div>
    <input type="checkbox" value="max-height" data-bind="checked: menuEffect" />Slide In/Out
</div>
<div>
    <input type="checkbox" value="opacity" data-bind="checked: menuEffect" />Fade In/Out
</div>

I'm trying to output the value of the checkboxes in the span tag, but cant quite get it to work?

My viewModel:

self.menuEffect: ko.observableArray(["max-height", "opacity"]);

Any ideas would be very helpful ?

Answer 1

I think this is what you are trying to achieve: jsfiddle.net/7ZC4v/3

The only thing different is that I changed the : to a =

self.menuEffect= ko.observableArray(["max-height", "opacity"]);