Front
[javascript] <input type ="checkbox">의 checked 확인 / checkbox 전체 선택 / 전체 선택 취소 / 부분 선택 / getElementsByName() / onclick()
bkuk
2022. 9. 23. 13:49
아래와 같은 체크 박스와 버튼이 있습니다.
전체코드는 아래와 같습니다.
<script>
window.onload = function() {
// 박스 체크 확인 함수
document.getElementById( "matchBtn" ).onclick = function() {
let fruitCheckBtn = document.getElementsByName('1row');
for( let i = 0; i <= fruitCheckBtn.length-1 ; i++ ){
if( fruitCheckBtn[i].checked) {
console.log(true);
} else {
alert((i+1) + "번은 체크되지 않았습니다.");
}
}
}
// 전체 선택 함수
document.getElementById("selectAllBtn").onclick = function() {
let selectControlAll1 = document.getElementsByName('1row');
let selectControlAll2 = document.getElementsByName('2row');
for( let j = 0; j <= selectControlAll1.length -1; j++) {
if(selectControlAll1[j].checked == true && selectControlAll2[j].checked == true ) {
selectControlAll1[j].checked = false;
selectControlAll2[j].checked = false;
} else {
selectControlAll1[j].checked = true;
selectControlAll2[j].checked = true;
}
}
}
// 동일하게 선택 함수
document.getElementById("selectHalfBtn").onclick = function() {
let selectHalf01 = document.getElementsByName("1row");
let selectHalf02 = document.getElementsByName("2row");
for( z = 0; z <= selectHalf01.length -1; z++ ) {
if(selectHalf01[z].checked == true) {
selectHalf02[z].checked = true;
}
}
}
}
</script>
</head>
<body>
<div class = "fruits">
<input name = "1row" type = "checkbox" value = "ap"/>사과
<input name = "1row" type = "checkbox" value = "wm"/>수박
<input name = "1row" type = "checkbox" value = "st"/>딸기
</div>
<div class = "pressBtn">
<input id ="matchBtn" type = "button" value= "박스 체크 확인">
<input id ="selectAllBtn" type = "button" value= "전체 선택">
<input id ="selectHalfBtn" type = "button" value= "동일하게 선택">
</div>
<div class = "sports">
<input name = "2row" type = "checkbox" />축구
<input name = "2row" type = "checkbox" />야구
<input name = "2row" type = "checkbox" />배구
</div>
</body>우선 어떻게 동작하는지 보겠습니다.
박스 체크 확인 버튼을 누른 후 사과, 수박, 딸기 중 체크가 되어있지 않는
박스에 체크되지 않았다고 경고창( alert)을 뛰웁니다.
* 버튼 누르기 전
* 버튼 누르기 후
// getElementById를 통해 접근 후 onclick 이벤트 관련 함수 정의
document.getElementById( "matchBtn" ).onclick = function() {
let fruitCheckBtn = document.getElementsByName('1row');
// for문을 통해 1 ~ 3 체크박스의 checked를 확인
// checked 상태라면 console에 true 반환
// 반대는, 경고창 표시
for( let i = 0; i <= fruitCheckBtn.length-1 ; i++ ){
if( fruitCheckBtn[i].checked) {
console.log(true);
} else {
alert((i+1) + "번은 체크되지 않았습니다.");
}
}
}전체 선택 버튼을 누르면 모든 버튼이 체크된 상태로 변경되고,
모든 버튼이 체크된 상태라면 체크되지 않은 상태로 변경됩니다.
* 버튼 누르기 전
* 버튼 누르기 후
// getElementById를 통해 접근 후 onclick 이벤트 관련 함수 정의
document.getElementById("selectAllBtn").onclick = function() {
let selectControlAll1 = document.getElementsByName('1row');
let selectControlAll2 = document.getElementsByName('2row');
// if문을 통해 위쪽과 아래쪽의 체크박스 모두 checked 라면 false로 변경
// 반대는, 모든 체크박스 cheked를 true로 변경
for( let j = 0; j <= selectControlAll1.length -1; j++) {
if(selectControlAll1[j].checked == true && selectControlAll2[j].checked == true ) {
selectControlAll1[j].checked = false;
selectControlAll2[j].checked = false;
} else {
selectControlAll1[j].checked = true;
selectControlAll2[j].checked = true;
}
}
}동일하게 선택 버튼을 누르면 첫번쨰 줄에 선택한 체크박스와
같은 번호인 아랫줄에 체크박스가 체크가 됩니다.
* 버튼 누르기 전
* 버튼 누르기 후
// getElementById를 통해 접근 후 onclick 이벤트 관련 함수 정의
document.getElementById("selectHalfBtn").onclick = function() {
let selectHalf01 = document.getElementsByName("1row");
let selectHalf02 = document.getElementsByName("2row");
// if문을 통해 위쪽의 체크박스의 checked가 true라면, 아래쪽 체크박스의 checked도 true로 변경
for( z = 0; z <= selectHalf01.length -1; z++ ) {
if(selectHalf01[z].checked == true) {
selectHalf02[z].checked = true;
}
}
}