고정 헤더 영역
상세 컨텐츠
본문
체크박스엘리먼트.checked = true (체크)
체크박스엘리먼트.checked = false (체크해제)소스
<body>
<h2>체크박스 테스트</h2>
<form name="mForm" action="a.html">
<div>
<!--onchange : 상태가 바뀔때-->
<input type="checkbox" name="all" id="all" value="all" onclick="doAction();" />
<label for="all">전체</label>
</div>
<div>
오늘 점심 메뉴는?<br />
<input type="checkbox" id="menu1" name="menu" value="1" />
<label for="menu1">돌솥비빔밥</label>
<input type="checkbox" id="menu2" name="menu" value="2" />
<label for="menu2">라면</label>
<input type="checkbox" id="menu3" name="menu" value="3" />
<label for="menu3">햄버거</label>
</div>
</form>
<script>
function doAction() {
var f = document.mForm;
// id가 all인 체크박스의 상태에 따라
console.log(f.all.checked);
// name이 menu인 체크박스의 상태를 변경
var ckMenu = f.menu; // menu의 갯수에 따라 하나가 올수도, 여러개가 올 수도 있음
// 객체가 배열인지 확인 (checked가 있는지, 또는 length가 있는지 확인)
if (ckMenu.length) {
for (var i = 0; i < ckMenu.length; i++) {
// 전체체크박스의 상태와 동일한 값을 준다
ckMenu[i].checked = f.all.checked;
}
} else {
ckmenu.checked = f.all.checked;
}
console.log(ckMenu.checked);
}
</script>
</body>
결과
'개발 > JavaScript' 카테고리의 다른 글
| JavaScript - select 객체의 옵션 추가, 삭제, 비활성화(options.length, disabled) (0) | 2020.06.04 |
|---|---|
| JavaScript - select 객체(selectedIndex, options) (0) | 2020.06.04 |
| JavaScript - 폼 데이터 체크 후 서브밋 하기(onsubmit) (0) | 2020.06.04 |
| JavaScript - 엘리먼트의 값 추가, 삭제(innerHTML, remove) (0) | 2020.06.03 |
| JavaScript - 엘리먼트의 속성 추출하기(getAttribute) (0) | 2020.06.03 |
댓글 영역