单选按钮在点击上显示模式弹出框

我正在开发一个小项目来熟悉ASP.NET。我有这个模型单选按钮在点击上显示模式弹出框

public partial class COUNTRIES 
{ 
public int COUNTRY_ID { get; set; } 
public string COUNTRY_NAME { get; set; } 
public int COUNTRY_AREA { get; set; } 
}

查看

<div class="col-lg-12"> 
    <div class="form-group"> 
     @Html.LabelFor(model => model.COUNTRY_NAME, new { @class = "col-lg-2 control-label" }) 
     <div class="col-lg-9"> 
      @Html.TextBoxFor(model => model.COUNTRY_NAME, new { @class = "form-control" }) 
     </div> 
    </div> 
</div> 

<div class="col-lg-12"> 
    <div class="form-group"> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { id = "", value = "" }) North East 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { id = "", value = "" }) North West 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { id = "", value = "" }) South West 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { id = "", value = "" }) South East 
     </div> 
    </div> 
</div>

米=> m.COUNTRY_AREA应该产生4个单选按钮，以及4个单选按钮被绑定到它。

我想实现的是，当我点击：

单选1，它应该显示有消息弹出模式窗体“你们是从东北
单选按钮2，它应该显示一个弹出式模式形式，带有消息“你来自西北。
RadioButton 3，它应该显示一个带弹出窗口的模态表单，并显示消息“你来自东南部。
RadioButton 1，它应该显示一个带弹出窗口的模态窗体。

我如何去了解它

来源

2017-05-24 Jibike

您可以轻松地完成这个使用JavaScript ...可以你添加到你的问题，一个单选按钮呈现的HTML？ – Hackerman

这将工作，并且它分解，这样只有一个JavaScript函数：

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index706</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".DoPopup").click(function (event) { 
       alert("You are from the " + event.target.id); 
      }) 
     }) 
    </script> 
</head> 
<body> 
    <div class="col-lg-12"> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.COUNTRY_NAME, new { @class = "col-lg-2 control-label" }) 
      <div class="col-lg-9"> 
       @Html.TextBoxFor(model => model.COUNTRY_NAME, new { @class = "form-control" }) 
      </div> 
     </div> 
    </div> 

    <div class="col-lg-12"> 
     <div class="form-group"> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { @class = "DoPopup", id = "North East", value = "" }) North East 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { @class = "DoPopup", id = "North West", value = "" }) North West 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { @class = "DoPopup", id = "South West", value = "" }) South West 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { @class = "DoPopup", id = "South East", value = "" }) South East 
      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2017-05-24 17:29:17 kblau

https://jsfiddle.net/kblau237/3m27una2/ – kblau

单选按钮在点击上显示模式弹出框

回答

相关问题