Question

问题背景：

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

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

问题：

目前第一组Radio按钮（价格排序组）工作正常，如果我点击'High To Low'然后选择单选按钮，如果我然后选择'Low To High'这将被选中。

第二组带有市场的3个单选按钮，这给我带来了麻烦。这样就可以检查 所有三个 单选按钮而不只是一个，一旦检查完毕，用户就无法取消选中它们，如下所示：

守则：

这是我视图中的MarkUp。我正在使用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>

HomePageVM：

public class HomePageVM
{
    public bool highToLow { set; get; }
    public bool lowToHigh { set; get; }

    public bool amazonAndEbay { set; get; }
    public bool amazonOnly { set; get; }
    public bool ebayOnly { set; get; }
}

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个复选框的帮助将非常感谢。

Answer 1

如果您只想从一组单选按钮中选择一个，那么您必须为它们提供一个共同的name，它将它们组合在一起，并允许您只从组中选择一个。该示例允许您选择Camaro或Mustang，但不能同时选择它们，因为它们具有相同的名称，这意味着它们属于同一组项目：

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

这个例子可以让你选择一辆车（Camaro或野马）和一种颜色（黄色或绿色）：

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

Answer 2

集中注意力非常严重，只是意识到我为每个属性使用不同的模型值而不是一个常用的值。

Answer 3

您在Marketplaces组中选中所有三个复选框的原因是您为此按钮组中的每个单选按钮使用单独的名称。所有应该互斥的按钮应该是由一个标签代表的一个组的一部分。此外，由于您单独和单独声明每个单选按钮，我认为没有必要使用HtmlRadioButtonFor。只需对您的代码进行以下更改即可。请注意，我将您的单选按钮组命名为＆＃34; Marketplaces＆＃34;：

守则：

    <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>

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

3 个答案: