WEB/JavaScript
[JavaScript] checkbox 핸들링
developer of the night sky
2023. 10. 6. 15:19
🔻checkbox 핸들링🔻
버튼으로 checkbox 체크/체크해지
<!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>
<form name="form1">
<input type="checkbox" name="cb1">
<input type="button" name="btn1" value="버튼">
</form>
<script>
document.form1.btn1.onclick = m1;
function m1() {
document.form1.cb1.checked=!document.form1.cb1.checked;
}
</script>
</body>
</html>
전체 체크 박스 만들기
전체 체크를 할 요소들을 for으로 이벤트 객체의 결과를 반영한다.
for (var i=0; i<document.all.cbitem.length; i++){
document.all.cbitem[i].checked = event.target.checked;
}
<!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>
<th><input type="checkbox" name="cbitem"></th>
<th>노트북</th>
<th>1</th>
<th>2,000,000원</th>
</tr>
<tr>
<th><input type="checkbox" name="cbitem"></th>
<th>노트북</th>
<th>1</th>
<th>2,000,000원</th>
</tr>
<tr>
<th><input type="checkbox" name="cbitem"></th>
<th>노트북</th>
<th>1</th>
<th>2,000,000원</th>
</tr>
</table>
<script>
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;
}
}
</script>
</body>
</html>
