線上書籍

Home

111網頁前端設計工程師培訓班

  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.