首页 > 解决方案 > 单击单选按钮时,显示文本输入控件,尝试输入文本会关闭应用程序

问题描述

在选择一个单选按钮以显示控件所在的 div 之后,我正在尝试在文本输入控件中键入文本。我遇到的问题是在单击正确的单选按钮并显示带有文本框控件的 div 之后, 键入应用程序关闭的信息。我在 Visual Studio 中执行此操作。我的 HTML 和 Jquery 代码如下。

   <div class="row">
      <div class="col-md-7">
          <label for="radio1">
               <input type="radio" id="radio1" name="optGiftCardRadio" value="email">Send my Gift Card by Email.
          </label>
          <div id="One" style="display:none">
              <div class="row">
                  <div class="col-md-12">
                       <div class="form-group">
                          <label for="email">Email Address:<span style="color:red" class="required"> *</span></label>
                               <input type="text" class="form-control" id="email" name="email">
                       </div>
                  </div>
              </div>
              <div class="row">
                  <div class="col-md-12">
                       <div class="form-group">
                          <label for="confirmEmail">Confirm Email Address:<span style="color:red" class="required"> *</span></label>
                               <input type="text" class="form-control" id="confirmEmail" name="confirmEmail">
                       </div>
                   </div>
               </div>
          </div>                             
          <label for="radio2">
               <input type="radio" id="radio2" name="optGiftCardRadio" value="regularMail">Send my Gift Card by U.S. Mail.
          </label>
          <div id="Two" style="display: none;">
               You elect to recieve a physical Gift Card in the mail at the mailing addres you provided.
          </div>                             
      </div>

这是Jquery

$("input[type='radio']").click(function () {
    if ($(this).val() == "email") {
        $("#One").show();
    }
    else {
        $("#One").hide();
    }

    if ($(this).val() == "regularMail") {
        $("#Two").show();
    }
    else {
        $("#Two").hide();
    }
});

标签: javascriptjqueryhtml

解决方案


推荐阅读