[JavaScript] 임의값으로 innerHTML 값 찾기 및 응용

예제 화면구조

화면단

최초상태

만약에 위 사진의 someVals와 같이 임의로 설정한 "1", "3", "5"를 이용하여

체크박스의 <span> 근처의 checkbox를 체크하고, checkbox의 value를 얻어보도록 한다.

기대한대로 실행이 된다면 checkbox를 체크하고 그의 value "one","three","five"를 얻어올 것이다.

targetArr 구조

예시코드

document.addEventListener('DOMContentLoaded', () => {
    base.event();
});

let someVals = ["1","3","5"]; //해당 값을 가진 체크박스를 체크해야한다.

//찾고자 하는 <span>의 부모 element들 : targetArr
let targetArr = document.getElementsByTagName('label');

let objVals = new Array();

let base = {
    event : function(){

        //label들은 동일한 구조로 이루어져 있으므로 각각의 내부를 뒤져본다.
        Object.keys(targetArr).forEach(key => {
            let innerVal = targetArr[key].children[1].innerHTML; //확인해볼 <span>의 innerHtml ( jQuery의 text() );
            let checkbox = targetArr[key].children[0];

            //someVals for문 돌려서 비교
            someVals.forEach(e => {
                if(innerVal === e){
                    checkbox.checked = true; //같은 값을 찾았다면 체크박스 체크!

                    console.log("checkbox의 값: "+checkbox.value);

                    objVals.push(checkbox.value); //체크박스의 값 array에 집어넣기
                }
            });
        });

        console.log("목표 값을 제대로 가져왔는가 확인 : " + objVals); //얻어온 값 확인

    }
}

결과확인