관리 메뉴

프로그래밍 삽질 중

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

과거 프로그래밍 자료들/프로젝트

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

평부 2022. 8. 10. 22:55

 

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

 

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

* 객체의 길이를 구하기 위해 for문을 썼다가 중복되는 부분이 많아 함수로 합치는 과정에서 반복문 for ...in을 알게 됨 * 객체의 경우 index가 있으므로 for ..in 사용이 효과적 - 참고 : http://daplus.net/j

ba-gotocode131.tistory.com

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

-> 다른 방법 필요했음

 

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

 

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

체크박스를 클릭하여 선택할 때마다, 총 몇개가 선택되었는지, 체크된 항목의 개수를 구하는 예제입니다. 체크박스에 체크된 항목 개수 구하기 개 고양이 토끼 function getCheckedCnt() { // 선택된

hianna.tistory.com

 

* 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);
  }
}