과거 프로그래밍 자료들/프로젝트
[javascript] input 체크박스(JS에서 만든 경우) 의 체크 항목 개수 구하기
평부
2022. 8. 10. 22:55
* 체크박스에 체크된 개수 세는 데 이 코드 사용 안 함 => https://ba-gotocode131.tistory.com/180
-> 체크박스에서 체크 항목 누르면 눌러진만큼 숫자가 변화해야 하는데 변하지 않음
-> 다른 방법 필요했음
-> 참고 : https://hianna.tistory.com/431
* 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);
}
}