所以,我有一个带有3个单选按钮的表单。根据用户选择的选项(他只能选择一个),可能有3种情况:
我的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代码不起作用。无论我选择何种选择,当我提交时都没有任何反应。
答案 0 :(得分: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>
答案 1 :(得分:0)
我建议使用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>