Programming/JavaScript
[JavaScript] Check Box, Radio Box
Isaac S. Lee
2023. 10. 6. 15:32
🍁Check Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>체크 박스</h1>
<form name="form1">
<input type="checkbox" name="cb1">
<input type="button" value="버튼" name="btn1">
</form>
<script>
document.form1.btn1.onclick = m1;
function m1() {
document.form1.cb1.checked = !document.form1.cb1.checked;
}
</script>
</body>
</html>
버튼에 이벤트를 걸어서 체크 박스를 클릭했을 때 외에도 버튼을 클릭했을 때 체크 박스에 체크가 되게 할 수 있다.
🍁장바구니
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>장바구니</h1>
<table border width="500">
<tr>
<th><input type="checkbox" name="cball"></th>
<th>상품명</th>
<th>수량</th>
<th>가격</th>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
<tr>
<td><input type="checkbox" name="cbitem"></td>
<td>노트북</td>
<td>1</td>
<td>2,000,000원</td>
</tr>
</table>
<script>
document.all.cball.onchange = m2;
function m2() {
// if (event.target.checked) {
// for (var i=0; i<document.all.cbitem.length; i++) {
// document.all.cbitem[i].checked = true;
// }
// } else {
// for (var i=0; i<document.all.cbitem.length; i++) {
// document.all.cbitem[i].checked = false;
// }
// }
for (var i=0; i<document.all.cbitem.length; i++) {
document.all.cbitem[i].checked = event.target.checked;
}
}
</script>
</body>
</html>제일 위의 체크박스를 클릭하면 전체 선택이 되고, 상품별로 체크를 할 수 있게 한다.
체크 박스를 눌렀을 때 클릭이라는 행동을 하므로 onclick 이벤트를 걸어도 되고, 입력 컨트롤이 자기가 가진 값을 변할 때를 인식하는 onchange 이벤트를 걸어도 된다.
document.all.cball.onchange = m2;
function m2() {
alert(event.target.checked);
}지금은 onchange로 이벤트를 걸었다. 체크할 때와 체크를 해제할 때의 업무가 다르기 때문에 이제 이를 구분해 주어야 한다.
checked를 검증하며 체크가 되면 true, 체크를 해제하면 false를 받는다.
일괄 선택
document.all.cball.onchange = m2;
function m2() {
if (event.target.checked) {
for (var i=0; i<document.all.cbitem.length; i++) {
document.all.cbitem[i].checked = true;
}
} else {
for (var i=0; i<document.all.cbitem.length; i++) {
document.all.cbitem[i].checked = false;
}
}
}document.all.cball.onchange = m2;
function m2() {
for (var i=0; i<document.all.cbitem.length; i++) {
document.all.cbitem[i].checked = event.target.checked;
}
}
상단의 체크 박스를 체크하면 모든 상품이 일괄 선택된다.
🍁Radio Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>라디오 버튼</h1>
<label><input type="radio" name="rb" value="white" checked>흰색</label>
<label><input type="radio" name="rb" value="black">검은색</label>
<label><input type="radio" name="rb" value="tomato">빨간색</label>
<label><input type="radio" name="rb" value="gold">노란색</label>
<label><input type="radio" name="rb" value="cornflowerblue">파란색</label>
<script>
var rb = document.all.rb;
for (var i=0; i<rb.length; i++) {
rb[i].onchange = m1;
}
function m1() {
document.body.bgColor = event.target.value;
if (event.target.value == 'black') {
document.body.text = 'white';
} else {
document.body.text = 'black';
}
}
</script>
</body>
</html>
검은 화면일 때 글자 색상을 흰색으로 바꿔서 글자가 보이게 했다.
