CheckBox

FRONT/js

hyunjun's developing 🏣 2024. 8. 28. 17:40

체크 박스 태그와 속성을 연습할 UI이다.

<body>

<div id = "yellow">yellow</div>

<div id = "black">black</div>

<form>

<input type = "checkbox" name = "chk" value = "yellow" />옐로우선택<br/>

</div>

</body>

이렇게 만들면 되고 CSS로 작업해준다. CSS는 생략하겠다. 전체선택 버튼에서 allSel(this)를 클릭할 때 호출을 하는데 이 this는 input요소를 말한다. 즉 input요소의 내용을 전달하겠다는 뜻이다.

function allSel(chkAllObj){

console.log(chkAllObj.checked); // 전체선택 체크박스의 체크여부 확인 가능

var chks = document.getElementsByName("chk"); //[ehk,ehk,ehk,ekh]

chks.forEach((chk) =>{

chk.checked = chkAllObj.checked;

}

);

}

이가 allSel 함수이다. 호출을 한 input요소를 전달 받을 떄마다 콘솔에 체크가 풀렸는지 되었는지 true/false로 반환한다.

그리고 DOM 탐색으로 Name이 chk인것을 찾아서 chks라는 배열에 넣어주고 배열을 for문을 통해서 전체선택의 true/false여부를 개개에 넣어준다.

function sel(){

//체크박스 여러개 탐색

var chks = document.getElementsByName("chk");

chks.forEach((chk) =>

{

if(chk.checked){

document.getElementById(chk.value).style.backgroundColor=chk.value;

}else{

document.getElementById(chk.value).style.backgroundColor="white"

}

})

}

이 부분은 각각의 체크박스의 자바스크립트 코드이다.

if 문부터 설명을 하자면 chk.value 값이 id와 일치하는 부분을 찾는다. 그 부분을 찾아서 해당 그 구역을 value에 명시된 값으로 바꿔준다.