JQUERY/예제들
chenk값 예제 : 모든항목 선택문제
나이많은 초보
2022. 8. 26. 17:46
<!-- * 모든항목선택 checkbox를 선택하면 취미관련 check박스를 모두 선택하거나 해제를 하고자 하는 코드이다.
하지만 모든항목선택 checkbox를 선택해도 원하는대로 동작하지 않았다.
해당 기능이 적용되지 않은 원인과 조치내용(해결방법)을 작성하세요. -->
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
var all = document.getElementById("all");
all.addEventListener('click', function() {
checks = document.getElementsByName("hobby");
selected = false;
for ( var i = 0; i < checks.length; i++) {
checks[i].checked = selected;
}
});
}
</script>
</head>
<body>
<input type="checkbox" name="all" id="all" value="모든항목선택">모든항목선택
<p>
취미(중복선택) : <input type="checkbox" name="hobby" value="피아노">
피아노
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="테니스">테니스
<input type="checkbox" name="hobby" value="등산">등산
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
var all = document.getElementById("all");
all.addEventListener('click', function() {
checks = document.getElementsByName("hobby");
selected = true; //값변경했음.
for ( var i = 0; i < checks.length; i++) {
checks[i].checked = selected;
}
});
}
</script>
</head>
<body>
<input type="checkbox" name="all" id="all" value="모든항목선택">모든항목선택
<p>
취미(중복선택) : <input type="checkbox" name="hobby" value="피아노">
피아노
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="테니스">테니스
<input type="checkbox" name="hobby" value="등산">등산
</p>
</body>
</html>