如何在淘汰赛中绑定单选按钮的名称属性

Posted 2023-03-27

【中文标题】如何在淘汰赛中绑定单选按钮的名称属性

【英文标题】：How to bind name attribute of a radio button in knockout

【发布时间】：2020-05-22 01:44:16

【问题描述】：

我在使用 knockout.js 的 ASP.Net 项目中有此代码：

<div>
     <input type="radio" name="hearingAidConditionGroup" value="Yes" data-bind="checked: condition">&nbsp;<label class="YesNo">&nbsp;Yes&nbsp;</label>
     <input type="radio" name="hearingAidConditionGroup" value="No" data-bind="checked: condition">&nbsp;<label class="YesNo">&nbsp;No&nbsp;</label>
</div>

它存储在一个名为 a.cshtml 的文件中，我有另一个 html 文件，其中包括这个：

<div data-bind="with: testConditions()[0]">
    <h4>Test conditions</h4>
    @Html.Partial("~/a.cshtml")
</div>
<div data-bind="with: testConditions()[1]">
    <h4>Second test conditions</h4>
    @Html.Partial("~/a.cshtml")
</div>

在我的 js 文件中：

this.testConditions = ko.observableArray([
         condition: "Yes" ,
         condition: "Yes" 
    ]);

所以问题是我如何区分单选按钮，就像上面的代码一样，我表单中的所有单选按钮都具有相同的名称，并且基本上在 div 中选择其中一个，包括 testConditions()[0] 会影响 div 中的其他单选按钮包括testConditions()[1]，反之亦然。

我正在考虑在数组中添加第二个属性，例如：

this.testConditions = ko.observableArray([
             condition: "Yes", itemname: "group1" ,
             condition: "Yes", itemname: "group2" 
        ]);

并在 html 中使用：

 <div>
     <input type="radio" value="Yes" data-bind="checked: condition, name: itemname">&nbsp;<label class="YesNo">&nbsp;Yes&nbsp;</label>
     <input type="radio" value="No" data-bind="checked: condition, name: itemname">&nbsp;<label class="YesNo">&nbsp;No&nbsp;</label>
 </div>

但是，它不起作用。有什么想法吗？

【参考方案1】：

我找到了答案：

<div>
 <input type="radio" value="Yes" data-bind="checked: condition, attr:  'name': itemname">&nbsp;<label class="YesNo">&nbsp;Yes&nbsp;</label>
 <input type="radio" value="No" data-bind="checked: condition, attr:  'name': itemname">&nbsp;<label class="YesNo">&nbsp;No&nbsp;</label>
</div>

【参考方案2】：

尝试这样分组

<input type="radio" name="radiobutton[0]" value="a"><br>
<input type="radio" name="radiobutton[0]" value="b"><br>
<input type="radio" name="radiobutton[0]" value="c"><br>
<br>
<input type="radio" name="radiobutton[1]" value="x"><br>
<input type="radio" name="radiobutton[1]" value="y"><br>
<input type="radio" name="radiobutton[1]" value="z">

提交表单时 单选按钮[0] = "a"; 单选按钮[1] = "x";

或

试试 jsfiddle

【讨论】：

感谢您的回答，但我真的很想拥有一个模块化代码，是的，总是可以在需要大量编码的 html 文件中包含所有单选按钮，想象一下我有 1000 个不同的测试条件跨度>

在此更新jsfiddle.net/chandirasekaranid/fgqkjenc