Question

我有一个带有单选按钮的表单。在表单提交之前，我需要检查是否选中了10个单选按钮。这个代码可以解决这个问题（即我在检查了10后收到警报），但是我无法确定将return true和return false语句放在哪里以阻止它或让它提交，如果我的数已达到10。

  $('.submit').click(function () {
      var radios = $(':radio');
      var count = 0;
      $.each(radios, function () {
          if ($(this).is(':checked')) {
              count++;
              alert(count);
          }

          if (count === 10) {
              alert('hi')
              return true;
          }
      })
      return false;
})

当底部的return false停止表单提交时，即使计数为10，但我需要返回false，以便立即停止提交表单。

希望这是有道理的。

Answer 1

使用event.preventDefault()代替return false;。另外，使用submit事件而不是click事件：

var the_form = $('#theformid');
the_form.submit(function (event) {
    var radios = the_form.find(':radio:checked');
    if (radios.length !== 10) {
        event.preventDefault();
        // provide feedback here.
    }
});

如果您附加了点击事件，您的表单仍然可以使用键盘提交。

Answer 2

尝试这样的事情：

$('.submit').click( function(){
  return $('#yourform :radio:checked').length == 10;
});

希望有一个像#yourform这样的容器ID，您可以使用它来使选择器更具体，如上所述。

修改：根据您的评论，如果您想要可靠地拦截表单提交（例如，即使在没有点击按钮的情况下提交），正如其他人建议您应该将行为附加到表单上提交活动。

$('#yourform').submit( function(e){
  var hasTen = $(this).find(':radio:checked').length == 10;
  if( !hasTen ){
    e.preventDefault();
    alert('Please check ten boxes.');
  }
});

Answer 3

为什么要检查迭代内的计数？您应该通过将检查放在每个函数之外来解决它。

$('.submit').click(function () {
  var radios = $(':radio');
  var count = 0;
  $.each(radios, function () {
      if ($(this).is(':checked')) {
          count++;
      }          
  });

  if (count == 10) {
          return true;
          alert("great!");
  }
  return false;
})

我还建议您使用console.log（msg）而不是alert（msg），这样可以更好地进行调试;）

编辑：我现在看到你对警报的评论，我认为这是出于调试目的，这就是为什么告诉你关于console.log的原因;）

jquery提交表单问题

3 个答案: