Asp.net mvc ASP.NET MVC-允许选择多个单选按钮，为什么？

问题背景：

    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.amazonAndEbay, new { id = "amazonEbayBox", @checked = "true" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> <img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Amazon & Ebay</label>
        </div>
    </div>
    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.amazonOnly, new { id = "amazonCheckBox" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> Amazon Only</label>
        </div>
    </div>
    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.ebayOnly, new { id = "ebayCheckBox" })<img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Ebay Only</label>
        </div>
    </div>

我在菜单中有两组单选按钮。一组具有2个单选按钮，允许用户选择一组项目，以按其价格从“高到低”或“低到高”进行排序和显示

第二组单选按钮允许用户搜索3个不同在线市场的结果

问题：

    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.amazonAndEbay, new { id = "amazonEbayBox", @checked = "true" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> <img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Amazon & Ebay</label>
        </div>
    </div>
    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.amazonOnly, new { id = "amazonCheckBox" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> Amazon Only</label>
        </div>
    </div>
    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.ebayOnly, new { id = "ebayCheckBox" })<img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Ebay Only</label>
        </div>
    </div>

目前，第一组单选按钮（价格排序组）工作正常，如果单击“从高到低”，则将选择该单选按钮，如果单击“从低到高”，则将选择该单选按钮

第二组有3个市场单选按钮，给我带来了问题。这允许选中所有三个单选按钮，而不是仅选中一个，并且一旦选中所有按钮，用户将无法取消选中它们，如图所示：

代码：

    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.amazonAndEbay, new { id = "amazonEbayBox", @checked = "true" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> <img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Amazon & Ebay</label>
        </div>
    </div>
    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.amazonOnly, new { id = "amazonCheckBox" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> Amazon Only</label>
        </div>
    </div>
    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.ebayOnly, new { id = "ebayCheckBox" })<img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Ebay Only</label>
        </div>
    </div>

这是我的观点中的标记。我正在使用

RadioButtonsFor

Razer控件将每个单选按钮绑定到ViewModel中的特定属性

        <div class="form-group">
            <div class="maxPricePad">
                <label>@Html.RadioButtonFor(model => model.amazonAndEbay, true, new { id = "amazonEbayBox", @checked = "true" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> <img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Amazon & Ebay</label>
            </div>
        </div>
        <div class="form-group">
            <div class="maxPricePad">
                <label>@Html.RadioButtonFor(model => model.amazonOnly, true, new { id = "amazonCheckBox" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> Amazon Only</label>
            </div>
        </div>
        <div class="form-group">
            <div class="maxPricePad">
                <label>@Html.RadioButtonFor(model => model.ebayOnly, true, new { id = "ebayCheckBox" })<img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Ebay Only</label>
            </div>
        </div>

在Chrome中呈现的单选按钮：

 <div class="form-group">
    <div class=" maxPricePad">
        <label>
            <input checked="true" data-val="true" data-val-required="The amazonAndEbay field is required." id="amazonEbayBox" name="amazonAndEbay" type="radio" value="True"><img class="originPic" src="/Images/amazon.png"> <img class="originPic" src="/Images/ebay.png"> Amazon &amp; Ebay</label>
    </div>
</div>
<div class="form-group">
    <div class=" maxPricePad">
        <label>
            <input data-val="true" data-val-required="The amazonOnly field is required." id="amazonCheckBox" name="amazonOnly" type="radio" value="True"><img class="originPic" src="/Images/amazon.png"> Amazon Only</label>
    </div>
</div>
<div class="form-group">
    <div class=" maxPricePad">
        <label>
            <input data-val="true" data-val-required="The ebayOnly field is required." id="ebayCheckBox" name="ebayOnly" type="radio" value="True"><img class="originPic" src="/Images/ebay.png"> Ebay Only</label>
    </div>
</div>

亚马逊公司；易趣网
仅限亚马逊
仅限易趣

---

如果您能帮我确定为什么要选择所有3个复选框，我将不胜感激。

我的注意力非常迟钝，刚刚意识到我对每个属性使用了不同的模型值，而不是一个普通值。

如果您只想从单选按钮组中选择一个，那么您必须给它们一个选项通用

名称

，将它们组合在一起，并允许您从组中仅选择一个。该示例允许您选择Camaro或Mustang，但不能同时选择两者，因为它们具有相同的名称，这意味着它们属于相同的项目组：

<input type="radio" name="car"/> Camaro <br/>
<input type="radio" name="car"/> Mustang <br/>  

Camaro

野马

此示例允许您选择一辆车（卡马罗或野马）和一种颜色（黄色或绿色）：

Camaro

野马

黄色

绿色

之所以在Marketplaces组中选中所有三个复选框，是因为您对该按钮组中的每个单选按钮使用了单独的名称。所有应该相互排斥的按钮都应该是由一个标签表示的一个组的一部分。另外，由于您单独声明每个单选按钮，我认为没有必要使用HtmlRadioButtonFor。只需对代码进行以下更改。请注意，我将您的单选按钮组命名为“Marketplaces”：

代码：

    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.amazonAndEbay, new { id = "amazonEbayBox", @checked = "true" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> <img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Amazon & Ebay</label>
        </div>
    </div>
    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.amazonOnly, new { id = "amazonCheckBox" })<img class="originPic" src="@Url.Content("~/Images/amazon.png")" /> Amazon Only</label>
        </div>
    </div>
    <div class="form-group">
        <div class="maxPricePad">
            <label>@Html.RadioButton("Marketplaces", model.ebayOnly, new { id = "ebayCheckBox" })<img class="originPic" src="@Url.Content("~/Images/ebay.png")" /> Ebay Only</label>
        </div>
    </div>

@RadioButton（“Marketplaces”，model.amazonAndEbay，new{id=“amazonEbayBox”，@checked=“true”）亚马逊和易趣
@RadioButton（“Marketplaces”，model.amazonoOnly，new{id=“amazonCheckBox”}）仅限亚马逊
@RadioButton（“Marketplaces”，model.ebayOnly，new{id=“ebayCheckBox”}）仅限易趣

这种方法工作正常，但由于某种原因，Chrome抱怨[DOM]发现了两个id不唯一的元素