表單驗證 - 組中至少需要一個複選框

-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

表單驗證 - 組中至少需要一個複選框

回答

相關問題