表单验证 - 组中至少需要一个复选框

-1

我发现了几个示例和解决方案，但没有一个像我想的那样为我工作。表单验证 - 组中至少需要一个复选框

我需要的是这样的：我有一个表格，我必须为23个“用户”选择我们可以称之为“属性”的东西，并且至少需要一个。

应该视觉上像一个电子表格，用行和列：

我一直没能够做的就是确保至少有一个选项选择为每一个用户标识。

你能指点我正确的方向吗？我应该用什么？它可以是编码标准，也可以是工具...我不知道...

来源

2017-10-20 Eliphas Siqueira

显示你的努力，但没有工作的代码。 – Barmar

_“你能指点我吗？” - 它从这里开始：[问]。 – CBroe

[多个复选框至少需要1个]的可能重复（https://stackoverflow.com/questions/22238368/multiple-checkboxes-at-least-1-required）。此外，[此树屋后]（https://teamtreehouse.com/community/html5-required-checkbox-in-group）可能会有所帮助，并且[此SO问题]（https://stackoverflow.com/questions/42308370/检查是否至少一个复选框是检查使用html5只）也是相关的。 –

有很多方法可以解决这个问题。我可以告诉你其中的一个。

注：我不擅长编码。我不完全知道这是否是一种好的做法，但它是有效的。

首先，在你的复选框中添加class和name属性。 class将用于验证，name将用于在提交后获取您的数据。

下面是一个示例代码：我只使用了4个选项和4个用户标识。你可以相应地改变它。

  <table class="table table-bordered"> 
      <tr> 
       <td> 
        UserID 
       </td> 
       <td> 
        1 
       </td> 
       <td> 
        2 
       </td> 
       <td> 
        3 
       </td> 
       <td> 
        4 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Option A 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox1" name="user1option" value="a" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox2" name="user2option" value="a" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox3" name="user3option" value="a" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox4" name="user4option" value="a" /> 
       </td>    
      </tr> 
      <tr> 
       <td> 
        Option B 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox1" name="user1option" value="b" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox2" name="user2option" value="b" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox3" name="user3option" value="b" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox4" name="user4option" value="b" /> 
       </td>    
      </tr> 
      <tr> 
       <td> 
        Option C 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox1" name="user1option" value="c" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox2" name="user2option" value="c" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox3" name="user3option" value="c" /> 
       </td> 
       <td> 
        <input type="checkbox" class="checkbox4" name="user4option" value="c" /> 
       </td>    
      </tr> 
     </table>

其次，在表单中添加的onsubmit（）进行验证功能。

<form action="submitaction" onsubmit="return validateForm()">...

*最后，对于添加验证这个脚本

<script type="text/javascript"> 

    function validateForm() { 
     var checked = true; 

     // create a loop for checking 
     //for loop will be based on the no of userid in this sample its 4 
     for (var i = 1; i <= 4; i++) { 

      //will check the classname if it is checked 
      if ($('input.checkbox' + i).is(':checked')) 
       checked = true; 
      else 
       checked = false; 

      // will break the loop if the returned check is false in the checked options 
      if (checked == false) 
       break; 

     }; 

     if (checked == false) 
      alert("form not submitted."); 

     return checked; 
    } 
</script>

来源

2017-10-20 02:56:52 Miggy

表单验证 - 组中至少需要一个复选框

回答

相关问题