Question

以下是我的代码它通过foreach循环生成列表，它的单选按钮的ID在所有自动生成的单选按钮中保持相同，因此我无法获得基于Radio的特定值按钮选择，所以请可以选择获得价值。

<div id="divaddress" data-bind="foreach: Addresslist">
    <div class="col-lg-4 col-md-4 col-xs-4">
        <div class="i-boxb">
            <input class="checkout-radio" type="radio" name="existingaddress" id="exadressid" data-bind="click:GetAddressId" @*onclick="GetAddressId()"*@ />
            <label class="cradio" for="normal" data-bind="text:Name" style="font-weight:bold"> </label>
            <p data-bind="text:Address"></p>
            <p data-bind="text:City"></p>
            <p data-bind="text:State"></p>
            <p data-bind="text:Pincode"></p>
            <p id="Mobileno" data-bind="text:Mobile"></p>
        </div>
    </div>
</div>

Answer 1

如果我理解正确，你有一个地址列表，每个地址都有一个复选框。并且您希望在用户检查地址时获得Id地址（例如在购物网站上）

您必须向视图模型中添加名为selectedAddressId的属性。

var viewModel = function () {
    var self = this;
    self.selectedAddressId = ko.observable();
    self.Addresslist = ko.observableArray([
        { Id: 1, Address: "Number 10", City: "London" },
        { Id: 2, Address: "Number 420", City: "Delhi" },
    ]);

    // this will subscribe to the radio selection changes
    self.selectedAddressId.subscribe(function (selectedValue) {
        // all the logic you want on selecting of checkbox goes here
        alert(selectedValue);
    });
};

然后在您的HTML中，您可以使用checked绑定。您需要将地址的Id绑定到无线电输入的value

<div id="divaddress" data-bind="foreach: Addresslist">
    <div class="col-lg-4 col-md-4 col-xs-4">
        <div class="i-boxb">
            <input class="checkout-radio" type="radio" name="selectedAddressId" data-bind="value:id, checked: $parent.selectedAddressId"  />
            <label class="cradio" for="normal" data-bind="text:Name" style="font-weight:bold"> </label>
            <p data-bind="text:Address"></p>
            <p data-bind="text:City"></p>
            <p data-bind="text:State"></p>
            <p data-bind="text:Pincode"></p>
            <p id="Mobileno" data-bind="text:Mobile"></p>
        </div>
    </div>
</div>

注意无线电绑定中的$parent.selectedAddressId。如果没有$parent，则淘汰将在您的selectedAddressId对象中查找Address属性，而不是在您的父视图模型

中

我创建了fiddle

如何根据单击的单选按钮获取子元素的值

1 个答案: