js 表單

表單選擇與表單全選checkbox checked && checkbox All checked

js
// 選單選擇數據
const  radioLists=[
    'Html','Css','JavaScript','Node','Vue'
] 
// 渲染到選擇表單
const radioGroup = document.querySelector('.radio_group');
let arr = "";
radioLists.forEach((item) => {
        //加法赋值运算符
        arr += `<label class="radioBox" for="${item}" name="fav_language" >${item}<input type="checkbox" value="${item}" id="${item}"><span class="square-mark"></span><label>`;
})
radioGroup.innerHTML = arr;

// 綁定可選擇表單
const checkboxLists =document.querySelectorAll('.radioBox input');
// 綁定全選表單Class selectAll
const selectAll= document.querySelector('.selectAll');

//監控點擊全選表單
selectAll.addEventListener('change', function () {
// 綁定所有複選表單
    checkboxLists.forEach(function (item,index) {
        item.checked = this.checked;
    }, this)
   // 原來的選擇數據
    const originalData =[
        'Html','Css','JavaScript','Node','Vue'
    ]
   
    //***提示 ＝>提示 全選變不選時 數據要清空
    selectAll.checked ? selectObject =originalData : selectObject=[];
    innerHtmlUl(selectObject)
})

//這裡選擇的數據必須全局
var selectObject =[];
   //選擇項目或是不選項目時的數據必須通過這個函式來執行
function innerHtmlUl (selectObject){
    const ulContent = document.querySelector('ul');
    let arry = "";
    selectObject.forEach((x) => {
        //加法赋值运算符
        arry += `<li >${x}<li>`;
    })
    ulContent.innerHTML = arry ;
}

// 遍歷 checkboxLists
for (let i = 0; i < checkboxLists.length; i++) {     
    //監控單個 checkboxLists[i]
    checkboxLists[i].addEventListener( "change",function (){
    if(checkboxLists[i].checked){
        selectObject.push(checkboxLists[i].value); 
        if(selectObject.length>=checkboxLists.length) {
            selectObject =radioLists
        }
        innerHtmlUl(selectObject)
    }else{
        selectObject.splice(checkboxLists[i].value,1);
        innerHtmlUl(selectObject)
    }
      selectObject.length==checkboxLists.length ? selectAll.checked=true:selectAll.checked=false;
    })
}