Question

我需要帮助，因为如果没有选中任何一个复选框，就会混淆如何阻止表单提交。

var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');

$form.on('submit', function(e) {
  $.each($checkbox, function(index, value) {
    if (!$(value).is(':checked')) {
      alert('Opps! You not select friends.');
      e.preventDefault();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="send-invite-form">
  <input type="checkbox" class="invitation-friends" value="875" />
  <input type="checkbox" class="invitation-friends" value="394" />
  <button type="submit">Send</submit>
    </form>

代码检查每个复选框。我不想要它。我想如果选中一个复选框，则表单可以提交。如果没人检查，保释提交。

请帮忙。

Answer 1

有一种方法可以比你正在做的更简单。没有必要循环。刚刚使用:checked伪类选择器来获取一组已检查的节点，并检查生成的节点集的.length。如果.length为0，则未选中任何复选框。

$( '#send-invite-form' ).on('submit', function(e) {
   if($( 'input[class^="invitation-friends"]:checked' ).length === 0) {
      alert( 'Oops! You not select friends.' );
      e.preventDefault();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
     <input type="checkbox" class="invitation-friends" value="875" />
     <input type="checkbox" class="invitation-friends" value="394" />

     <button type="submit">Send</submit>
</form>

Answer 2

第一个问题来自这一行：

if ( !$(value).is(':checked')) {

应该是：

if ( !$(this).is(':checked')) {

由于value包含所选复选框的值而非对象，因此$(value)将不起作用。

然后，如果您想提交至少一个复选框，您可以检查已检查输入的长度，如：

if( $('input.invitation-friends:checked').length == 0 )
{
    return false; 
}

希望这有帮助。

＆＃13;

var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');

$form.on('submit', function(e) {
  if( $('input.invitation-friends:checked').length == 0 )
  {
    return false; 
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="send-invite-form">
  <input type="checkbox" class="invitation-friends" value="875" />
  <input type="checkbox" class="invitation-friends" value="394" />

  <button type="submit">Send</submit>
</form>

＆＃13;

Answer 3

试试这个，不用解释我想：

var found = false;
$.each( $checkbox, function(index, value) {
    if( $(this).is(':checked') ) {
        found = true;
    }
});
if(!found){
    alert( 'Opps! You not select friends.' );
    e.preventDefault();
}

Answer 4

由于提交按钮是控制表单提交，我根据复选框单击

控制其启用/禁用状态

＆＃13;

window.onload = checkBoxEventAndOnSubmitFunctionality();

  function checkBoxEventAndOnSubmitFunctionality() {
    let checkBoxes = document.getElementsByClassName('invitation-friends');
    let checkBoxChecked = 0;
    
    for(i=0;i<checkBoxes.length;i++) {
       checkBoxes[i].onclick = function(e) {
          if(e.path[0].checked) checkBoxChecked += 1;
          else checkBoxChecked -= 1;
       }
    }
    document.getElementById("send-invite-form").onsubmit = function(e) {
      if(checkBoxChecked !=0) {
        alert("can submit");
         document.getElementById("send-invite-form").submit();
      }
      else {
        alert("can NOT submit");
        e.preventDefault();
      }
    }
  }

＆＃13;

<form id="send-invite-form" onsubmit="checkForCheckBoxes" method="POST">
     <input type="checkbox" class="invitation-friends" value="875" />
     <input type="checkbox" class="invitation-friends" value="394" />

     <button type="submit" id="submitButton">Send</button>
</form>

＆＃13;

如果未选中任何复选框，则阻止表单提交

4 个答案: