8-10-3 表單-複選-HTML5驗證

1. 三元運算：
   條件 ? 符合條件結果 : 不符合條件結果;
   condition ? statement-if-true : statement-if-false;

   valid = stru[i]['valid'] ? ` oninput="renderCheckbox('${stru[i]['name']}');"`: '';

    

2. input 的監聽事件：oninput、onchange

   區別

   oninput 事件在元素值發生變化時立即觸發（頁面顯示的是回調函數處理過後的內容）
   onchange 在元素失去焦點時立即觸發（首先顯示的是未處理的內容，失去焦點的情況在才去進行回調函數的執行，改變輸入的內容）

3. 步驟：https://www.notion.so/ugm-share/checkbox-valid-b361e7ecf06246bbad8b879aeda7bbd1

   1. 若有設定 required => 在input 上 增加 屬性 required 與 oninput="renderCheckbox('checkbox')"
      checkbox 為 input 的 name

   2. 判斷 checkbox 是否有勾選
       

      
          function isAtLeastOneChecked(name) {
            let checkboxes = Array.from(document.getElementsByName(name));
            return checkboxes.some(function(item) {
              return item.checked;
            });
          }

       

   3. 設定屬性 
       

      
          function setRequired(name){
            let checkboxes = Array.from(document.getElementsByName(name));
            for(let i in checkboxes){
              checkboxes[i].setAttribute('required', true);
            }
          }

       

   4. 移除屬性
       

      
          function removeRequired(name){
            let checkboxes = Array.from(document.getElementsByName(name));
            for(let i in checkboxes){
              checkboxes[i].removeAttribute('required');
            }
          }

       

   5. 渲染畫面

      
          function renderCheckbox(name){
            if(isAtLeastOneChecked(name)){
              removeRequired(name);
            }else{
              setRequired(name);
            }
          }

       

   6.