Question

below is my MVC app code with KnockOut JS, I have submit button with “onClick” event “SetData()”.

how to get all id of selected checkbox, I put commented code that works inside KnockOut OnSubmit, but I want outside,

///

@model Demo.Web.ViewModels.HomeViewModel
@{
   ViewBag.Title = "Two Page";
 }
@using (Html.BeginForm())
{
<table>
    <tr>
        <td>
            <span data-bind="foreach: pageOptions">
                <input type="checkbox" data-bind="checked: IsChecked" />
                <span data-bind="text: OptionName"></span>
                <br />
            </span>
        </td>
    </tr>
</table>

<input type="submit" name="send" value="Send" onclick="SetData();" />
}

<script type="text/javascript">
var viewModel = {
    pageOptions: ko.observableArray([{"OptionCode":1,"OptionName":"Option 1","IsChecked":true},{"OptionCode":2,"OptionName":"Option 2","IsChecked":false},{"OptionCode":3,"OptionName":"Option 3","IsChecked":true},{"OptionCode":4,"OptionName":"Option 4","IsChecked":true}]),
    IsChecked: ko.observableArray()
    };

$(function() {
        ko.applyBindings(viewModel);
    });


function SetData() {
    alert('f');
    //         var ids = [];
   //                $.each(this.pageOptions(), function(n, item) {
   //                    if(item.IsChecked)
   //                    ids.push(item.OptionCode);
   //                });
   }

  </script>     

///

Answer 1

The

IsChecked: ko.observableArray()

is never used. Define IsChecked property of the pageOptions elements as an observable():

var viewModel = {
    pageOptions: ko.observableArray([{"OptionCode":1,"OptionName":"Option 1","IsChecked": ko.observable(true)},{"OptionCode":2,"OptionName":"Option 2","IsChecked": ko.observable(false)},{"OptionCode":3,"OptionName":"Option 3","IsChecked":ko.observable(true)},{"OptionCode":4,"OptionName":"Option 4","IsChecked":ko.observable(true)}]),
    IsChecked: ko.observableArray() ---> delete this, you don't need it
};

Then, outside the knockout domain you can access the values with:

for(var i = 0; i < viewModel.pageOptions().length; i++) {
    if(viewModel.pageOptions()[i].IsChecked()) { 
        ---> the logic you want to use 
    }
}

Knockout update the IsChecked property of the JSON object as long as the checkbox is data-binded with an ko.observable(). If you just data-bind with a value (true/false) the object is never updated when the user check or uncheck the html control.