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

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

2 个答案: