[html+javascript+css] input checkbox

 안녕하세요.

 genshin grouper를 만들면서 배운 내용들을 정리해보고자 합니다.

 먼저 input 태그의 checkbox입니다.

차례

0. checkbox

1. checkbox 값 다루기

 1-1. queryselector

2. label에 이미지 넣기

 2-1. img 태그

 2-2. css - background

3. 체크 했을 때

 3-1. 체크박스 없애기

 0. checkbox

<input type='checkbox' name='toto' value='1' id='toto1'>
<label for='toto1'>toto1</label>

 checkbox는 여러 항목의 해당하는 것을 선택해 넣을 때 씁니다.

 근데 checkbox만 쓰면 내용물을 쓸 수는 있지만 사각형만 나와 직관적이지 않습니다. 그때 이름이나 이미지를 넣기 위해서 label을 사용합니다. label로 추가된 이름이나 이미지를 눌러도 체크됩니다.

 label을 사용하기 위해선 input에 id를 쓰고, label의 for에 같은 id를 넣어주면 됩니다.

 

 checkbox로 데이터를 활용하려면 value에 값을 넣으면 됩니다.

 

 1. checkbox 값(value) 다루기

See the Pen Untitled by 김준완 (@svxeiavl-the-styleful) on CodePen.

 input에 onclick(event)로 함수를 작동시키게 합니다.

 

 documen.getElementsByName으로 값을 받게 만듭니다.

 

 name[i].checked를 이용하면 체크가 됬는지 확인할 수 있습니다.

 name[i].value를 이용해 checkbox의 값을 받아올 수 있습니다.

 

 1-1. queryselector

 체크가 되어있는지 확인해 값을 넣어주는 것이 기본 활용법인데, 위와 같은 방법은 써야할 줄이 많아집니다. 이를 간단하게 만들 수 있게 해주는 것이 queryselector입니다.

 query는 '질문'이란 의미로, queryselector는 query라는 조건에 해당하는 요소를 받아주는 역할을 합니다.

See the Pen Untitled by 김준완 (@svxeiavl-the-styleful) on CodePen.

 queryselectorAll(query)로 query를 만족하는 모든 걸 모아옵니다.

 input 중에서 name에 해당하는 것 중에서 check된 것들을 모읍니다.

 

 forEach는 배열의 원소를 쭉 돌면서 괄호 안 함수를 수행합니다. 함수는 따로 준비한 리스트에 queryselector로 모은 요소의 value를 넣습니다.

 

 2. label에 이미지 넣기

 label에 이미지를 넣는 두 가지 방법이 있습니다. 하나는 img 태그를 사용하는 것이고, 하나는 css에서 하는 법입니다.

 예시로 위 코드에서 label 내용물만 바꿔줍니다.

 2-1. img 태그

 label에 img 태그를 넣으면 됩니다.

...
<label for='amber'><img src='./amber.jpg'></label>
...
<label for='barbara'><img src='./barbara.jpg'></label>
...
<label for='keqing'><img src='./keqing.jpg'></label>

이미지는 vertical-align:top;을 적용한 예시. <출처 : Honey Impact>

 역시 이미지를 클릭하면 체크 됩니다.

 2-2. css - background

 css로 스타일을 넣을 수 있는데, background로 뒷 배경을 넣는 걸 활용합니다. 쓸게 위에 것보다 많지만, 체크 했을 때 스타일을 만들어주기 위해 사용하는 방식입니다.

input[type="checkbox"]+label{
	display:inline-block;
    
	width:80px;
	height:100px;
	}

#amber+label{
	background:url('./amber.jpg') no-repeat 0 0px / contain;
	}

 먼저 이미지가 들어갈 자리를 파기 위해 블럭을 만들어줍니다. (query에서 썼던 것과 비슷하게 생겼네요.)

 타입이 checkbox인 input과 label에 동시에 80px X 100px짜리 블럭을 만듭니다.

 

 background

 - url(...) : 뒷 배경에 넣을 이미지

 - no-repeat : 공간에 이미지를 바둑판처럼 반복시키지 않도록 합니다.

 - 0 0px : 위/왼쪽 여백

 - / : 옆에는 size와 관련된 속성을 씁니다. contain은 비율을 유지한 체로 가로세로 크기에 맞춰 이미지 크기를 최대로 키웁니다.

 

 3. 체크 했을 때

 체크했을 때 테두리를 칠해보겠습니다.

input[type="checkbox"]:checked+label{
	box-shadow:0px 0px 5px blue;
	border-radius:5px;
	}

 query에서 했던 것과 비슷하게, :checked를 추가한 걸 위 css에 추가해줍니다.

 만약 check된 각 label에 스타일을 넣고 싶으면,

#amber:checked+label{
	background: url('./amber1.webp') no-repeat 0 0px / contain;
	}

이미지를 바꿔보았따.

 3-1. 체크박스 없애기

 이미지 넣고 채크 했을 때 스타일도 넣었는데, 체크박스가 남아있으면 딱히 이유가 없다면 거슬리겠죠. 그럴 때 css에서 체크박스를 지우는 방법이 있습니다.

label[type="checkbox"]{
	display:none;
	}

 

 

 이걸로 마무리해보겠습니다.

 감사합니당.