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

Posted 2023-03-27

【中文标题】通过 knockout.js 将选中的复选框值传递给 javascript

【英文标题】：Passing checked checkbox value to javascript through knockout.js

【发布时间】：2016-08-21 07:36:24

【问题描述】：

我是淘汰 js 的新手。我需要从 asp.net mvc cshtml 中获取复选框选中的值，然后使用淘汰赛 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 iam 中绑定值 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】：

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>

【讨论】：

谢谢mukul，但我只需要使用复选框，还需要检索检查值数组。