Question

下面是我使用KnockOut JS的MVC应用程序代码，我提交了带有“onClick”事件“SetData（）”的按钮。

如何获取所选复选框的所有ID，我将注释代码放在KnockOut OnSubmit中，但我想在外面，

///

@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

IsChecked: ko.observableArray()

从未使用过。将pageOptions元素的IsChecked属性定义为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
};

然后，在淘汰域外，您可以使用以下内容访问值：

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

Knockout会更新JSON对象的IsChecked属性，只要该复选框与ko.observable（）数据绑定即可。如果只是使用值（true / false）进行数据绑定，则在用户选中或取消选中html控件时，对象永远不会更新。

如何在KnockOut外的“SetData（）”方法中获取所有复选框ID（以逗号分隔）？

1 个答案: