Question

所以，我有一个带有3个单选按钮的表单。根据用户选择的选项（他只能选择一个），可能有3种情况：

如果他选择第一个，当他提交表格时，他会被重定向到新的网址。
如果他选择第二个，则出现div（然后消失）。
如果他选择第三个，会出现一个div（与前一个不同），然后它也会消失。

我的HTML：

<form>
      <div class="radio">
        <label><input type="radio" name="paypal" value="paypal"</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="money" value="money"></label>
      </div>
      <div class="radio">
        <label><input type="radio" name="mastercard" value="mastercard"></label>
      </div>
</form>
<button type="button" id="button1" name="button">Check</button>

我的JQuery：

$('#button1').click(function() {
  var value = $(this).val();
  if (value == 'paypal') {
    window.location.assign("http://www.paypal.com");
}
  else if (value == 'money') {
    $('.div2').show('slow'); 
      $('.div2').fadeOut(4000);
}
}
  else if (value == 'mastercard') {
    $('.div1').show('slow'); 
       $('.div1').fadeOut(4000);
}

但有些东西在这里不起作用，我无法弄清楚是什么或在哪里。编辑：没有错误，JQuery代码不起作用。无论我选择何种选择，当我提交时都没有任何反应。

Answer 1

通过在按钮单击中使用var value = $(this).val();，您实际上正在获取按钮本身的值，这不是您打算做的。

使所有radio按钮名称相同。请尝试以下代码：

$('#button1').click(function() {
  var value = $('input[name=myRadio]:checked').val();
  if (value == 'paypal') {
    console.log(value);
    window.location.assign("http://www.paypal.com");
  }
  else if (value == 'money') {
    console.log(value);
    $('.div2').show('slow'); 
    $('.div2').fadeOut(4000);
  }

  else if (value == 'mastercard') {
    console.log(value);
    $('.div1').show('slow'); 
    $('.div1').fadeOut(4000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="radio">
    <label><input type="radio" name="myRadio" value="paypal">Pay Pal</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="myRadio" value="money">Money</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="myRadio" value="mastercard">Master Card</label>
  </div>
</form>
<button type="button" id="button1" name="button">Check</button>

Answer 2

我建议使用submit按钮以及如下所示的提交表单事件，使其完全按照您的喜好工作，并通过指定相似的名称对单选按钮进行分组，并尝试减少if else并使其成为可能比以下代码更具可读性

let formEvents = {
  paypal: function() {
    console.log('redirecting');
    //uncomment the following line when you use it in your script
    //window.location.assign("http://www.paypal.com");
  },
  money: function() {
    $('.div2').show('slow', function() {
      setTimeout("$('.div2').fadeOut(4000)", 500);
    });
  },
  mastercard: function() {
    $('.div1').show('slow', function() {
      $('.div1').fadeOut(4000);
    });
  }
}

$('form').on('submit', function(e) {
  e.preventDefault();
  var value = $(this).find('input:radio:checked').val();

  if (formEvents.hasOwnProperty(value)) {
    formEvents[value].call(this);
  }

});

.div1,
.div2 {
  display: none;
  background: #c8c8c8;
  border: 2px dashed #000;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="radio">
    <label><input type="radio" name="selection" value="paypal">paypal</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="selection" value="money">money</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="selection" value="mastercard">mastercard</label>
  </div>
  <button type="submit" id="button1" name="button">Check</button>
</form>


<div class="div1">div 1</div>
<div class="div2">div 2</div>

基于无线电选择重定向表单

2 个答案: