예전에도 input type="checkbox" 의 이벤트 실행해 대해서 포스팅 한 적 있습니다.
개인적으로 체크박스로 만들어 진 것은 제어하기가 편해서 많이 사용 하는 것 같네요.
오늘은 간단하게 체크박스 클릭시 해당 라벨 등에 이벤트를 주는 방식을 알아보겠습니다.
오늘 만들 예시입니다.
시작 체크박스 설치
우선 간단하게 체크박스를 설치해야겠죠? html영역에 간단하게 삽입을 해줍니다.(jQuery는 2.1.3 버전을 사용 했습니다.)
<p>
<input type="checkbox" id="test-1">
<label for="test-1">체크박스를 체크 또는 라벨(이 문구)을 클릭시 글자가 변합니다.</label>
</p>
간단하게 체크박스가 설정 되었습니다.
이벤트를 실행시키는 방식은 비슷합니다. 다만 .parent() 를 사용해서 클래스 속성을 추가해줄 것입니다.
<style>.selected{text-decoration:line-through;font-weight:700;color:red}</style>
<!-- 스타일은 CSS에 추가해주는 것을 권장합니다. -->
<script>
$(document).ready(function() {
$("input:checkbox").on('click', function() {
if ( $(this).prop('checked') ) {
$(this).parent().addClass("selected");
} else {
$(this).parent().removeClass("selected");
}
});
});
</script>
</body>
스크립트를 살펴보면 체크박스가 클릭되었을 때 체크상태이면 부모 즉 현재는 <p> 태그겠죠?
<p>태그에 selcted 클래스를 추가하고 아니면 삭제하라라는 의미입니다.
.selcted 클래스의 속성은 가운데줄, 글자크기 700, 붉은색글씨색을 적어놓았습니다.
어때요 간단하죠?
한 번 더 응용을 해볼까요.
표안에 있는 체크박스를 이벤트 동작을 실행해보겠습니다.
예시 파일입니다.
|
|
|
|
|
티스토리에서 표를 생성하면
<table>
<tbody>
<tr>
<td><p>1행1열 -체크박스-</p></td>
<td><p>1행2열</p></td>
</tr>
<tr>
<td><p>2행1열</p></td>
<td><p>2행2열 -체크박스-</p></td>
</tr>
</tbody>
</table>
이런식의 구조를 가집니다. 이번에는
.parent()를 2번 더 사용해 <p> 위에 <td>태그 위에 <tr> 에 속성을 넣게 하면되겠죠?
<script>
$(document).ready(function() {
$("input:checkbox").on('click', function() {
if ( $(this).prop('checked') ) {
$(this).parent().parent().parent().addClass("selected");
} else {
$(this).parent().parent().parent().removeClass("selected");
}
});
});
</script>
</body>
체크박스는 단순히 값을 체크하는데만 사용 하는 것이 아니라
아래처럼 토글키 형식으로도 제작 할 수 있고
http://cocosoft.kr/383 - [jQuery] input checkbox 이벤트 실행
바로 이런식으로 말이죠.
See the Pen input checkbox 이벤트 by JCM (@cocosoft) on CodePen.
지금 현재 제 블로그 사이드바의 메뉴 또한 체크박스로 만들어진 드랍박스입니다.
http://cocosoft.kr/378 - 드랍다운 메뉴 모듈 만들기
이처럼 다양한 방식으로도 꾸미기를 할 수 있으며! 예쁜 체크박스를 통해서 다양한 메뉴 효과도 만들 수 있습니다!
jQuery가 아닌 CSS를 사용해서도 만들 수 있죠.input:checked를 사용해서요.
처음에는 많이 어렵지만 한 두번 만져보니 codepen.io에서 다른 체크박스의 메뉴의 사용도 쉽게 제어가 가능하더라구요.
지금 당장은 필요 없겠지만!! 혹시나 체크박스와 관련된 모듈을 꾸밀 때 참고하면 좋을 것 같습니다.
