Question

我有三个单选按钮，每个按钮都隐藏了<div>下的每个按钮（如果我没有将它们绑定到模型，则此单选按钮有效）。如果单击<div>并单击第二个单选按钮，则会隐藏第一个单选按钮，这也适用于另一个。

但是，每个单选按钮都有自己的功能，它将执行。所以在控制器上我为每个单选按钮都有一个If语句。将每个单选按钮绑定到模型后，它们不再起作用，当我选择另一个单选按钮并且不再隐藏<div>时，它们不会被取消选中。我不确定是否有我遗漏的东西。感谢。

    Razor Code

     <div class="form-group" style="margin-left: 165px;">    
        <div class="radio-inline">
            @Html.RadioButtonFor(model => model.Isrd1, "one",true, new { id = "id1" }) Radio One
        </div>

        <div class="radio-inline">
            @Html.RadioButtonFor(m => m.Isrd2, "two", new { id = "id2" })Radio two
        </div>

         <div class="radio-inline">
            @Html.RadioButtonFor(m => m.Isrd3, "three", new { id = "id3" })Radio three
        </div>
    </div>

我的模特：

    public class ModelSelection
    { 
         public string Types { get; set; }

         public string Isrd1 { get; set; }
         public string Isrd2 { get; set; }
         public string Isrd3 { get; set; }
    }

我的控制器：

     if (md.Types == "one")
     {
     }

     if (md.Types == "two")
     {
     }

     if (md.Types == "three")
     {
     }

我的JavaScript：

          $('input[name=Isrd1]').click(function () {
                if (this.id == "id1") {
                    $("#div1").show('slow');
                    $("#div2").hide('slow');
                    $("#div3").hide('slow');
                }
            });

             $('input[name=Isrd2]').click(function () {
                if (this.id == "id2") {
                    $("#div2").show('slow');
                    $("#div1").hide('slow');
                    $("#div3").hide('slow');

               $('input[name=Isrd3]').click(function () {
                if (this.id == "id3") {
                    $("#div3").show('slow');
                    $("#div1").hide('slow');
                    $("#div2").hide('slow');

Answer 1

单选按钮在具有相同名称时互相排斥，因此请确保您拥有同名无线电的最终生成HTML，然后只有当您选择一个无线电时，另一个将取消选择。

最终HTML赞成

<div class="radio-inline">
    <input id="id1" name="radio" value="1" /> <label>radio 1</label>
</div>
<div class="radio-inline">
    <input id="id2" name="radio" value="2" /><label>radio 2</label>
</div>
<div class="radio-inline">
    <input id="id3" name="radio" value="3" /><label>radio 3</label>
</div>

然后可以使用类选择器或基于id来处理您定义的模型。

要么你的单选按钮有代码

@Html.RadioButtonFor(model => model.Isrd, "one",true, new { id = "id1" })
@Html.RadioButtonFor(model => model.Irsd,"two", true, new {id = "id2"})
@Html.RadioButtonFor(model => model.Irsd,"three", true, new {id = "id3"})

这样你的单选按钮将以他们应该工作的方式工作，即互斥

如何从单选按钮将选定的值传递给javascript函数

1 个答案: