![[JavaScript] 체크박스를 이용한 백분율 선택](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoIvFI%2Fbtsg9vc1lKm%2Fq7Pk8JXgsZexZdDF84H1c0%2Fimg.jpg)
728x90
5의 배수( 5 ~ 100 까지 )의 값을 가지고 있는 체크박스중 하나를 선택한경우
선택한 체크박스의 value값보다 작은값을 가지고 있는 체크박스들은 전부 선택되고,
선택한 체크박스의 value값보다 큰값을 가지고 있는 체크박스들은 전부 선택해제된다.
# 소스코드
<html>
<head>
<title>:: 체크박스로 퍼센트 구하기 ::</title>
<style type="text/css">
table, th, td { border:1px solid #000000;border-collapse:collapse;padding:5px; }
label { width:55px; }
#progressBar { width:100%; }
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// @event 체크박스 체크 및 체크해제 이벤트 발생시 실행
document.querySelectorAll(".chkPercent").forEach(function(choiceBox, choiceNum) {
// 체크박스들중 하나의 값이 변경된 경우
choiceBox.addEventListener("change", function() {
let percentage = 0;
// 전체 체크박스의 변경을 위해 반복문( forEach ) 실행
document.querySelectorAll(".chkPercent").forEach(function(checkBox, checkNum) {
// 선택한 체크박스보다 값이 작은경우
if(choiceNum > checkNum) {
checkBox.checked = true;
}
// 선택한 체크박스보다 값이 큰경우
else if(choiceNum < checkNum) {
checkBox.checked = false;
}
});
// progress 태그에 선택한 체크박스의 value값 반영
if(choiceBox.checked == true) {
percentage = choiceBox.value;
}
// 체크를 해제하였기에 progress 태그에 이전 체크박스의 value값 반영
else {
percentage = document.querySelectorAll(".chkPercent")[choiceNum - 1].value;
}
document.getElementById("progressBar").value = percentage;
});
});
});
</script>
</head>
<body>
<div>
<h3>■ 백분율(Percent)값을 체크박스로 변경하기</h3>
<br/>
<table>
<thead>
<tr>
<th>/</th>
<th>Percent( % )</th>
</tr>
</thead>
<tbody>
<tr>
<th>5% ~ 25%</th>
<td>
<label><input type="checkbox" class="chkPercent" value="5">05%</label>
<label><input type="checkbox" class="chkPercent" value="10">10%</label>
<label><input type="checkbox" class="chkPercent" value="15">15%</label>
<label><input type="checkbox" class="chkPercent" value="20">20%</label>
<label><input type="checkbox" class="chkPercent" value="25">25%</label>
</td>
</tr>
<tr>
<th>30% ~ 50%</th>
<td>
<label><input type="checkbox" class="chkPercent" value="30">30%</label>
<label><input type="checkbox" class="chkPercent" value="35">35%</label>
<label><input type="checkbox" class="chkPercent" value="40">40%</label>
<label><input type="checkbox" class="chkPercent" value="45">45%</label>
<label><input type="checkbox" class="chkPercent" value="50">50%</label>
</td>
</tr>
<tr>
<th>55% ~ 75%</th>
<td>
<label><input type="checkbox" class="chkPercent" value="55">55%</label>
<label><input type="checkbox" class="chkPercent" value="60">60%</label>
<label><input type="checkbox" class="chkPercent" value="65">65%</label>
<label><input type="checkbox" class="chkPercent" value="70">70%</label>
<label><input type="checkbox" class="chkPercent" value="75">75%</label>
</td>
</tr>
<tr>
<th>80% ~ 100%</th>
<td>
<label><input type="checkbox" class="chkPercent" value="80">80%</label>
<label><input type="checkbox" class="chkPercent" value="85">85%</label>
<label><input type="checkbox" class="chkPercent" value="90">90%</label>
<label><input type="checkbox" class="chkPercent" value="95">95%</label>
<label><input type="checkbox" class="chkPercent" value="100">100%</label>
</td>
</tr>
</tbody>
</table>
<br/>
<progress id="progressBar" value="0" max="100"></progress>
</div>
</body>
</html>
# 출력결과
■ 백분율(Percent) 체크박스로 변경하기
| / | Percent( % ) |
|---|---|
| 5% ~ 25% | |
| 30% ~ 50% | |
| 55% ~ 75% | |
| 80% ~ 100% |
728x90
'JavaScript' 카테고리의 다른 글
| [JavaScript] 다중 파일 업로드시 진행률(ProgressBar) 표시 (0) | 2024.01.18 |
|---|---|
| [JavaScript] AJAX를 이용하는 Page Navigation 제작 (0) | 2023.12.08 |
| [JavaScript] 입력한 텍스트의 Byte 체크 (0) | 2023.02.14 |
| [JavaScript] 입력한 텍스트의 문자길이 체크 (0) | 2023.02.14 |
| [JavaScript] 휴대폰 번호 Hyphen(-) 삽입 형식 자동 입력폼 (0) | 2022.12.26 |