[javascript] input 체크박스(JS에서 만든 경우) 의 체크 항목 개수 구하기

 

* 체크박스에 체크된 개수 세는 데 이 코드 사용 안 함 =>  https://ba-gotocode131.tistory.com/180

[javascript] 객체의 값 반복문 사용, 반복되는 코드 함수로 통일

-> 체크박스에서 체크 항목 누르면 눌러진만큼 숫자가 변화해야 하는데 변하지 않음

-> 다른 방법 필요했음

 

-> 참고 : https://hianna.tistory.com/431

[Javascript] 체크박스에 체크된 항목 개수 구하기

 

* HTML 내 element 요소가 있는 게 아니라 JS에서 element 요소를 만들고 추가함

(element 요소 수가 정해지지 않았음으로)

-> 따라서 작동되는 함수(getCountCheckbox())가 맨 위에 존재

 

 

* 변경된 코드(일부 코드만 넣음)

readWords();

function getCountCheckbox() { //input에 name을 넣어야 작동함
  const query = 'input[name="countCheckbox"]:checked';
  const selectedElements = document.querySelectorAll(query);

  const selectedElementsCount = selectedElements.length;
  const $checkedCountingAll = document.querySelector(`#word-counting-checked`);
  $checkedCountingAll.innerHTML = selectedElementsCount;
}

async function readWords() {
  const token = localStorage.getItem("w-access-token");
  if (!token) {
    return;
  }
  //단어장 조회 api
  const config = {
    method: "get",
    url: url + "/words",
    headers: { "w-access-token": token },
  };
  try {
    const res = await axios(config);
    const wordDataSet = res.data.result;

    const easyArray = wordDataSet.easy;
    const middleArray = wordDataSet.middle;
    const advanceArray = wordDataSet.advance;

    const easyCount = easyArray.length;
    const middleCount = middleArray.length;
    const advanceCount = advanceArray.length;

    let checkedCount = 0;

    //총 단어 개수
    const allCount = easyCount + middleCount + advanceCount;
    const $wordCountingAll = document.querySelector(`#word-counting-all`);
    $wordCountingAll.innerHTML = allCount;

    for (let section in wordDataSet) {
      const $sectionUl = document.querySelector(`#${section} ul`);
      const arrayForEachSection = wordDataSet[section];

      let result = "";
      for (let word of arrayForEachSection) {
        let element = `
          <input type="checkbox" class="word-done" ${
            word.status === "C" ? "checked" : ""
          } name="countCheckbox" onClick="getCountCheckbox()"/>`;
        result += element;
      }
      $sectionUl.innerHTML = result;
      console.log(result);
    }
    if (res.data.code !== 200) {
      alert(res.data.message);
      return false;
    }
  } catch (err) {
    console.log(err);
  }
}