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

【问题标题】：How to pass selected value to javascript function from radio button如何从单选按钮将选定的值传递给javascript函数
【发布时间】：2017-01-17 18:41:02
【问题描述】：

我有三个单选按钮，每个按钮都隐藏了<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');

【问题讨论】：

单选按钮的目的是从许多中选择一个，并且它们通过分组来工作 - 即组中的每个单选按钮具有相同的名称属性。你的按钮都有不同的name 属性，所以它们没有意义（你可以选择全部，不能取消选择任何）
@StephenMuecke 让他们说得通，你能帮我编辑你认为我犯错的地方吗？
根据您的if (md.Types == "one") { .... 代码，您的单选按钮需要为<label>@Html.RadioButtonFor(m => m.Types , "one", new { id = "" })<span>Radio One</span></label>（@Html.RadioButtonFor(m => m.Types , "one", new { id = "" }) 等也是如此） - 在 POST 方法中，Types 的值将是所选按钮的值（“一”、“二”或“三”）。您的单选按钮不需要您的 Isrd1、Isrd2 和 Isrd3properties
您还需要更改您的脚本 - 应该是 $('input[name="Types"]').change(function() { ... }); 但我不知道您的 `id="div1" 等 div 在 DOM 中是什么以及您与单选按钮的关系

标签： javascript asp.net-mvc razor controller radio-button

【解决方案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"})

这样，您的单选按钮将按照应有的方式工作，即互斥

【讨论】：

我正在使用 Razor 并将每个单选按钮绑定到模型。
检查输入的 html 在开发人员工具中的外观及其名称。
同样用于绑定，尝试使用 id 或 class 作为 radios 的选择器。
单选按钮不接受四个参数。
你自己已经传递了四个参数。另请查看http://www.tutorialsteacher.com/mvc/htmlhelper-radiobutton-radiobuttonfor链接