728x90
안녕하세요 이번 시간에는 html에서 기본적으로 제공되는 체크박스를 커스텀하는 방법을 알아보겠습니다.
아래의 코드는 input 태그를 안보이게 처리한 뒤 for 속성을 통해 label 태그와 연결하고 label을 커스텀 하는 형태입니다.
index.html
label의 for와 input의 id 값을 일치시킴으로써 input과 label을 연결하였습니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "./index.css"/>
<script defer = "defer" src = "./index.js"></script>
</head>
<body>
<input type="checkbox" id = "custom_button" name = "" value="custom_value" class = "checkbox_class"/>
<label for="custom_button" id = "custom_button_label" class = "checkbox_label">커스텀 버튼</label>
</body>
</html>
index.css
input 태그는 안보이게 처리한뒤 체크박스 버튼이 true일 때와 false일 때의 css class를 각각 작성합니다.
.checkbox_class {
display : none;
}
.checkbox_label {
color : #404040;
background-color : #c0c0c0;
border-radius : 1rem;
font-size : 12px;
line-height : 16px;
padding : 8px;
margin : 4px;
text-align : center;
}
.checkbox_label:hover {
background-color : #A0A0A0;
}
.checkbox_label_click {
color : #FFFFFF;
background-color : #404040;
border-radius : 1rem;
font-size : 12px;
line-height : 16px;
padding : 8px;
margin : 4px;
text-align : center;
}
index.js
이후 input 태그를 클릭했을 때 true/false 여부에 따라 label의 css를 변경해주는 코드를 작성합니다.
// 체크박스 가져오기
const checkbox = document.getElementById("custom_button");
// 체크박스 클릭시 true/false 여부에 따라 색상 변하는 함수
function clickCheckbox(e) {
// 해당 체크박스의 라벨 가져오기
const label = document.getElementById(e.target.id+"_label");
// 체크박스 값이 true일 경우
if (e.target.checked == true) {
label.classList.replace('checkbox_label', 'checkbox_label_click');
}
// false일 경우
else {
label.classList.replace('checkbox_label_click', 'checkbox_label');
}
}
// 체크박스 클릭 이벤트
checkbox.addEventListener('click', (e) => {
clickCheckbox(e);
})
코드를 실행하면 아래와 같이 표시됩니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] fetch 요청 취소 (0) | 2023.03.19 |
|---|---|
| [JavaScript] Selector 태그에 placeholder 적용하기 (0) | 2023.03.18 |
| [JavaScript]XmlHttpRequest 사용해서 http 통신하기. (0) | 2023.03.03 |
| [javascript] Webrtc 1:1 영상통화 구현하기 (0) | 2023.02.23 |
| [javascript]정규식(regular expression) (0) | 2023.02.19 |