checkedValue binding on checkbox list

[mbtot...@gmail.com]

I'm trying to understand how to use the "checkedValue" binding on a checkbox list. My understanding it that it should work similar to the "optionsValue" binding of a dropdown in that you can pass the entire selected object (not just it's id) to an observable array when checked.

I've tried following the example in the documentation, but can't seem to get it to work -

Can someone point me to a better example?

[Michael Best]

It is not like optionsValue, for which you provide the property name of the value. With checkedValue, you provide the actual value.

-- Michael

[mbtot...@gmail.com]

Maybe optionValue was not the right comparison.  But here is the example provided in the documentation for checkedValue.  To me it's saying you should use checkedValue property if you want the value to be something other than a string (an object, possibly) and that the code example would add the item object to $root.chosenItems, not just the itemName property value of  "Choice 1'.  I assume you would have to iterate through $root.chosenItems and do something like $data.itemName to get the itemName of each checked item...

• checkedValue

  If your binding also includes checkedValue, this defines the value used by the checked binding instead of the element’s value attribute. This is useful if you want the value to be something other than a string (such as an integer or object), or you want the value set dynamically.

  In the following example, the item objects themselves (not their itemName strings) will be included in the chosenItems array when their corresponding checkboxes are checked:

  <!-- ko foreach: items -->     <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />     <span data-bind="text: itemName"></span> <!-- /ko -->   <script type="text/javascript">     var viewModel = {         items: ko.observableArray([             { itemName: 'Choice 1' },             { itemName: 'Choice 2' }         ]),         chosenItems: ko.observableArray()     }; </script>

[Michael Best]

With the options binding, the default is to use the item object as the "value". optionsValue lets you change it something else, such as the object's id. With the checked binding, the default value is the value attribute of the element, but you can override that to an object or any other type using checkedValue.

-- Michael

[mbtot...@gmail.com]

I appreciate your help -  it sounds like I understand it correctly - it just doesn't seem to work as expected.  Following their example, instead of assigning to the "value" attribute, I use the "checkedValue" and assign it the bound object "$data", which in my case has 2 properties - a "Display" and a "Value".  However, when I check one box in the list,  all the others check also (like they have the same value or something) - that's one issue. 

While keeping the checkedValue: $data, if I also assign to the value attribute - in my case I assigned it to the "Value" property of $data - the checkboxes work independently again, but the only value that gets placed in my observableArray upon checking is "Value" (not one object that has both "Display" and "Value").  Is there something I'm missing here?

<div data-bind="foreach: AdHocReport.AcademicLevels()">

             

<div><input type="checkbox" data-bind="attr: {value: Value}, checkedValue: $data, enable: !$root.AdHocReport.AllAcademicLevels(), checked: $root.SelectedAcademicLevels"/><span data-bind=" text: Display"></span></div>

             

</div>

[mbtot...@gmail.com]

I think I figured it out - since this behavior was so unusual, it occurred to me that the problem might be at a different level... For whatever reason, I was using knockout-2.2.0.js for my project --- I switched to knockout-3.2.0.js and suddenly the "checkedValue: $data" (and even just "value:$data") started working as expected.  They both passed the entire $data object to my observable array when checked (and the problem of one checkbox checking all checkboxes went away). 

Maybe this was a bug that got fixed or was functionality that wasn't introduced until 3.2.0.js - either way thanks again for trying to help.

[Michael Best]

checkedValue was added in version 3.0.0. I'm glad you figured it out.

-- Michael