Javascript检查文本框是否已填充或复选框已选中并显示div

Question

我有一个像这样的按钮：

input type="submit" name="continue" id="continue" value="CONTINUE" class="submitContact" />

然后为这个按钮设置一个看起来像这样的js：

$('#continue').click(function() {
    $('#storePickUp').change(function() { //catch checkbox
        var $check = $(this),
        $div = $check.parent();
    if($check.prop('checked') || $('#shippingZipCode').val().length) 
    {
    $('.checkoutForm').fadeIn(1000);
    }
    else {
document.getElementById(shippingZipCode).style.backgroundColor = '#FFFEAD'; 
    }
  });

});

我想做的是检查是否填写了文本框.shippingZipCode或选中了#storePickUp复选框，如果是，则显示具有类.checkoutForm的div。

但是，我无法使其正常工作。 这个js看起来还好吗？

谢谢！

Answer 1

您的点击事件来自submit输入。 因此，首先，您必须return false以防止其发布和重定向。

其次，您的点击事件仅分配一个更改事件。 更改事件将在对选定的输入进行更改时发出其分配的回调，该更改可能不会持续一段时间，肯定比页面发布之前的几毫秒短。

您将要检查您的值，然后确定要采取的操作，然后返回false以阻止发布。

$('#continue').click(function() {
  var $check = $('#storePickUp');//use reference to check for value immediately
  var $div = $check.parent();
  if($check.prop('checked') || $('#shippingZipCode').val().length) 
  {
   $('.checkoutForm').fadeIn(1000);
  }
  else {
   document.getElementById('shippingZipCode').style.backgroundColor = '#FFFEAD'; 
  }
  return false;//prevent form from posting
});

Answer 2

不需要复选框的更改功能。 只需检查其状态即可。

$('#continue').click(function() {
    var $check = $('#storePickUp'),
    $div = $check.parent();

    if($check.prop('checked') || $('#shippingZipCode').val().length) {
        $('.checkoutForm').fadeIn(1000);
    } else {
        document.getElementById('shippingZipCode').style.backgroundColor = '#FFFEAD';
    }
});