检查表单提交时至少选中一个复选框

Posted 2023-02-22

【中文标题】检查表单提交时至少选中一个复选框

【英文标题】：check atleast one checkbox is checked on form submission

【发布时间】：2013-08-25 01:18:03

【问题描述】：

我有一个包含复选框字段的表单，现在在提交表单时，我们应该检查是否至少选中了一个复选框

html代码

<form id="form_check" class="form" action="/path/to/some/url" method="POST">
  % for field in fields %
     <div class="check_fields">  
         <input class="select-unselect" type="checkbox" name="invite" value="">
          field
     </div>
  % endfor % 
     <input type="submit" class="btn btn-primary" value="Submit" onsubmit="atleast_onecheckbox()"/>
</form>

javascript 代码

<script type="text/javascript">
    function atleast_onecheckbox()
            
             var value = $("[name=invite]:checked").length > 0);
                 alert(value) ;      
                 if (!value)
                      
                    alert("Please.....");
                       
               
</script>    

所以当我点击提交按钮时，表单会重定向到action 中提到的 url，但它甚至没有点击 javascript 函数atleast_onecheckbox()

上面的代码有什么问题，谁能让上面的代码正常工作？

【问题讨论】：

onsubmit 应该在表单上，​​而不是提交按钮上。此外，您必须return false 或event.preventDefault() 以防止表单提交。

【参考方案1】：

您不应该直接在 html 中附加 JavaScript 事件，这是一种非常糟糕的做法。 相反，因为您使用 jQuery，所以您应该使用 jQuery 事件处理程序：

$('#form_check').on('submit', function (e) 
  if ($("input[type=checkbox]:checked").length === 0) 
      e.preventDefault();
      alert('no way you submit it without checking a box');
      return false;
  
);

(http://jsbin.com/IXeK/1/edit)

如果你真的想使用 HTML onsubmit，即使它很糟糕（你想想就应该感觉不好），onsubmit 应该是：

附在表格上 应该阻止提交时的默认事件 返回假

所以它涵盖了所有内容。喜欢这里http://jsbin.com/IXeK/2/edit

<form onsubmit="return atleast_onecheckbox(event)" id="form_check" class="form" action="/path/to/some/url" method="POST">
 <div class="check_fields">  
     <input class="select-unselect" type="checkbox" name="invite" value="">
 </div>
 <input type="submit" class="btn btn-primary" value="Submit" />

function atleast_onecheckbox(e) 
  if ($("input[type=checkbox]:checked").length === 0) 
      e.preventDefault();
      alert('no way you submit it without checking a box');
      return false;
  

【参考方案2】：

<script type="text/javascript">
function atleast_onecheckbox()
         
         if (document.getElementById('invite').checked) 
            alert('the checkbox is checked');
            
         else
           
          alert("please check atleast one..");
          return false;
               
           
 </script>    
 <form id="form_check" class="form" action="/path/to/some/url" method="POST">
  % for field in fields %
  <div class="check_fields">  
     <input class="select-unselect" type="checkbox" name="invite" id="invite" value="">
      field
 </div>
 % endfor % 
 <input type="submit" class="btn btn-primary" value="Submit" onclick=" return  atleast_onecheckbox()"/>
</form>

【讨论】：

还是一样，重定向而不显示更改消息

是的，它以这种方式工作，但我们不能对所有复选框使用相同的 id 对吗？这应该是不同的，因为我已经基于复选框字段实现了 ckeckall/unckeckall 功能