본문으로 바로가기

[jQuery]html 체크박스 체크시 이벤트 동작 발생

로딩중..
2016.03.23 01:05

예전에도 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에서 다른 체크박스의 메뉴의 사용도 쉽게 제어가 가능하더라구요.

지금 당장은 필요 없겠지만!! 혹시나 체크박스와 관련된 모듈을 꾸밀 때 참고하면 좋을 것 같습니다.

신고

댓글을 달아 주세요

  1. BlogIcon Helios℠ 2016.03.23 12:03 신고

    언제쯤 저는 코코님이 올려주시는 이런 주옥과도 같은 고급진 정보와 팁들을 적용해 볼 수 있는 '내공'이 쌓일까요..ㅜ.. 늘 알려 주시는 정보와 팁들 감사히 받아 먹고(?) 있습니다. 좋은 하루 되세요^^

  2. BlogIcon SONYLOVE 2016.03.23 18:08 신고

    요즘 드랍다운 메뉴를 어떻게 하면 잘 활용할 수 있을까 고민중이에요.
    쓰고 싶기는 한데.. 사이드바는 꽉차서 더이상 넣기는 싫고.... 다른 위치에 달자니 넣을 내용도 생각나지 않고...
    고민입니다.;;;

티스토리 툴바