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';
    }
});