학원 과제로 내 준 것을 하나씩 포스팅하면서 기억에 남겨보려고 한다.
Javascript 짜면서 전반적으로 할만 했는데, 하나라도 해제되면 체크박스 해제하는 부분에서 애먹었다..
체크박스 이벤트가 발동하지 않는것때문이었다.. 다른 이벤트처럼 바로 쓰려고 했었는데 console.log 찍어보는데 아예 들어가지도 않더라.. 무한 구글링+이것저것 시도해본 결과, 함수를 따로 만든 다음에 for문에서 호출 하니까 쉽게 해결되었다. (나는 왜 이걸로....다신 까먹지 않으리,,,)
JavaScript
<script>
window.onload = function () {
var all = document.getElementsByTagName("input");
var categories = document.getElementsByName("catg");
var writeC = '';
//카테고리 선택을 누르면 카테고리 출력
document.getElementById("selectb").onclick = function () {
for (var i = 0; i < categories.length; i++) {
if (categories[i].checked) {
writeC += categories[i].value;
}
}
document.getElementById("selectCat").innerText = writeC;
}
//전체선택시 전체선택/ 다시 누르면 전체 해제
document.getElementById("checkAll").onclick = function () {
if (checkAll.checked) {
for (var i = 0; i < categories.length; i++) {
categories[i].checked = true;
}
}else {
for (var i = 0; i < categories.length; i++) {
categories[i].checked = false;
}
}
}
//카테고리 내 checkbox클릭시 c() 실행
for(var i=0; i<categories.length; i++){
categories[i].onclick = c;
}
//카테고리 하나라도 안눌리면 전체체크박스 해제
function c(){
for (var i = 0; i < categories.length; i++) {
if (categories[i].checked == false) {
checkAll.checked = false;
}
}
}
}
</script>HTML 입력
<body>
<h1>Practice1</h1>
<form action="#">
<fieldset>
<legend>취미</legend>
<div id="selectAll">
<ul>
<li><input type="checkbox" name="select" id="checkAll">전체선택</li>
</ul>
</div>
<div id="category" class="cat">
<ul>
<li><input type="checkbox" name="catg" value="종합 ">종합</li>
<li><input type="checkbox" name="catg" value="소설 ">소설</li>
<li><input type="checkbox" name="catg" value="시/에세이 ">시/에세이</li>
<li><input type="checkbox" name="catg" value="경제/경영 ">경제/경영</li>
<li><input type="checkbox" name="catg" value="자기계발 ">자기계발</li>
<li><input type="checkbox" name="catg" value="아동 ">아동</li> <br>
<li><input type="checkbox" name="catg" value="여행 ">여행</li>
<li><input type="checkbox" name="catg" value="과학 ">과학</li>
<li><input type="checkbox" name="catg" value="역사/문화 ">역사/문화</li>
<li><input type="checkbox" name="catg" value="외국어 ">외국어</li>
<li><input type="checkbox" name="catg" value="컴퓨터 ">컴퓨터</li>
<li><input type="checkbox" name="catg" value="만화 ">만화</li>
</ul>
</div>
</fieldset>
<br>
<button type="button" id="selectb">카테고리 선택</button>
<div id="selectCat"></div>
</form>
</body>
위의 코드를 실행시키면 이런 화면이 나온다.
나중에 입맛에 맞게 수정해서 코드 가져다 쓰면 좋을 것 같다.
'JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 Canvas를 활용해 동영상에서 이미지 추출해서 저장하기 (0) | 2023.02.10 |
|---|---|
| 세미프로젝트) 제목 클릭시 맨 위에 있는 리뷰내용만 보여짐. 리뷰 내용이 undefiend로 잡히는 문제 (0) | 2021.05.09 |