通过knockout.js将选中的复选框值传递给javascript

时间:2016-04-27 06:53:50

标签: asp.net-mvc-4 model-view-controller knockout.js knockout-mvc

Iam newbie with knockout js。我需要从asp.net mvc cshtml中获取复选框选中的值,以使用knockout js传递给javascript。下面是代码

<tbody data-bind='foreach: AllAttrList'>
                        <tr id="trAttributeEditInd">
                            <td style="display: none;">
                                <span id="spnAttrId" data-bind="text: QuestionId"></span>
                            </td>
                            <td style="text-align: left;">
                                <input type="checkbox"  id="chkAttrName" style="margin-right: 20px"  data-bind="enable:!IsMandatory,checked:IsAssocToEngg && !IsMandatory" />
                                <span id="spnAttrNmInd" data-bind="text: QuestionText"></span>
                            </td>

                            <td>
                            </td>
                        </tr>
                    </tbody>

并在javascript中绑定值AllAttrList,如下所示

 self.AllAttrList = ko.observableArray([
            { QuestionId: 1, QuestionText: "atr1", IsAssocToEngg: true, IsMandatory: true },
            { QuestionId: 2, QuestionText: "atr2", IsAssocToEngg: true, IsMandatory: false },
            { QuestionId: 3, QuestionText: "atr3", IsAssocToEngg: false, IsMandatory: true },
            { QuestionId: 4, QuestionText: "atr4", IsAssocToEngg: false, IsMandatory: false },
            { QuestionId: 5, QuestionText: "atr5", IsAssocToEngg: false, IsMandatory: false },
            { QuestionId: 6, QuestionText: "atr6", IsAssocToEngg: false, IsMandatory: false },
            { QuestionId: 7, QuestionText: "atr7", IsAssocToEngg: false, IsMandatory: false },
            ]);

我需要获取已检查的值及其ID(这里是questionid的)。我试图遍历AllAttrList,但仍无法获得检查值。任何人都可以帮助我使用淘汰JS获取检查值吗?

1 个答案:

答案 0 :(得分:0)

You can Use @Html.RadioButtonFor in place of checkbox and bind with your model.
  @Html.RadioButtonFor(m => m.SomeModelProperty, "value", new { data_bind = "checked: model",@class="input" })
on .js file-
var abc = function(model)
{
    ko.applyBindings(BindModel(model))
}
var BindModel = function(model)
{
var self = this;
self.SomeModelProperty = ko.observable(model.SomeModelProperty);
}

Now you can do two way data-binding like this : -
<span id="spnAttrNmInd" data-bind='text: {QuestionText:SomeModelProperty()=="value", "":SomeModelProperty()=="" }'></span>