💡 학습목표
체크박스의 라벨이 여러개일 경우 편의를 위해 전체선택 버튼도 함께 만드는 경우가 많다. 이 경우 jQuery를 이용하면 전체선택 버튼을 쉽게 만들 수 있는데, 이번 포스팅에서는 .click() .on() .prop() 메서드를 이용하여 전체선택 버튼을 구현하고 각 메서드의 특징을 비교학습하는 것을 목표로 한다.
💡.click()
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$(":checkbox").attr("checked","checked")
})
});
</script>
</head>
<body>
SKILLS
<input type="checkbox" name="html5" value="html5" id="html5">
<label for="html5">HTML5</label>
<input type="checkbox" name="CSS" value="CSS" id="CSS">
<label for="CSS">CSS</label>
<input type="checkbox" name="jquery" value="jquery" id="jquery">
<label for="jquery">jquery</label>
<input type="checkbox" name="javascript" value="javascript" id="javascript">
<label for="javascript">javascript</label>
<p><button>전체선택</button></p>
</body>
</html>
가장 쉽게 생각할 수 있는 것은 요소를 선택했을 때 특정 함수를 실행시켜주는 메서드 .click()을 이용하는 것이다. 물론 이렇게 간단한 코드만으로도 전체선택이라는 목적에 부합하여 잘 작동하지만 문제점이 눈에 들어온다.
만약 특정 라벨을 선택한 상태에서 전체선택 버튼으로 모든 라벨을 선택하고 싶은 경우에는 작동하지 않는다.
.click()은 페이지가 최초로 로드되었을 때 선언 되었던 요소에 한해 작동하기 때문이다. 즉 .click()은 동적으로 이벤트를 바인딩하지 않는다.
그래서 이런경우에 동적으로 이벤트를 바인딩하는 .on을 사용한다.
💡 .on()
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("body").on("click","button",function(){
$(":checkbox").prop("checked",true);
})
});
</script>
</head>
<body>
SKILLS
<input type="checkbox" name="html5" value="html5" id="html5">
<label for="html5">HTML5</label>
<input type="checkbox" name="CSS" value="CSS" id="CSS">
<label for="CSS">CSS</label>
<input type="checkbox" name="jquery" value="jquery" id="jquery">
<label for="jquery">jquery</label>
<input type="checkbox" name="javascript" value="javascript" id="javascript">
<label for="javascript">javascript</label>
<p><button>전체선택</button></p>
</body>
</html>
위의 스크립트 코드는 body태그의 button을 클릭했을 때 input태그의 type이 checkbox인 요소를 찾아서 checked 옵션을 true로 정의 하는 코드이다.
.on()을 사용하면 최초로 로드되었을때의 요소 속성에 변화가 있어도 (checked) 동적으로 잘 작동한다.
💡 .prop()
- 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다.
- syntax
.click(function(){}) - javascript property를 취급한다.
- boolean, date, function 등도 가져올 수 있수있다.
- 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져 오거나 일치하는 모든 요소에 대해 하나 이상의 속성을 설정한다.
- 속성 값 (예 : tagName, nodeName, defaultChecked와 같은 DOM 속성 또는 사용자 정의 만든 속성)을 검색하는 데 사용한다.
- HTML 속성을 검색하려면 대신
.attr()를 사용한다. - 속성을 제거하려면
removeProp()메서드를 사용한다.
💡 전체선택과 전체취소
이렇게 만들면 또 한가지 불편한 점이 떠오른다. 체크를 풀어줄때도 전체를 풀어주어 사용성을 올리고싶으면 어떻게 해야할까?
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script type="text/javascript" src="./js/jquery_3.5.1.js"></script>
<script>
$(function() {
// 1 . #checkAll 클릭
$("#checkAll").click(function() {
// 2. #checkAll이 체크되었을 때,
// chk라는 name을 가진 input태그를 찾아 checked를 true로 정의
if ($("#checkAll").prop("checked")) {
$("input[name=chk]").prop("checked", true)
// 3. #checkAll이 체크되지 않았을 때,
// chk라는 name을 가진 input태그를 찾아 checked를 false로 정의
} else {
$("input[name=chk]").prop("checked", false)
}
})
});
</script>
</head>
<style>
input#checkAll {
display: none;
}
</style>
<body>
SKILLS
<input type="checkbox" name="chk" value="html5" id="html5">
<label for="html5">HTML5</label>
<input type="checkbox" name="chk" value="CSS" id="CSS">
<label for="CSS">CSS</label>
<input type="checkbox" name="chk" value="jquery" id="jquery">
<label for="jquery">jquery</label>
<input type="checkbox" name="chk" value="javascript" id="javascript">
<label for="javascript">javascript</label>
<br>
<input type="checkbox" id="checkAll">
<label for="checkAll">전체선택</label>
</body>
</html>
여러가지 방법이 있겠지만 가장 대표적으로 쓰이는 방법으로 전체선택 버튼을 checkbox type으로 생성하고, checked의 참,거짓 유무를 사용해 전체선택과 전체취소가 동작하는 로직을 구현해보았다.
