drag로 checkbox 체크하기

요즘 다음메일이나 네이버메일을 보면 checkbox 선택 시 하나씩 클릭하여 선택하는 것이 아닌 drag만으로 선택이 가능합니다.

보통 목록 노출수가 20~30개이기 때문에 특정 10개만 선택하고자 할 경우 전체선택이나 하나씩 선택만으로는 불편함이 존재합니다.

이럴 때 유용하게 사용 가능한 jQuery plugin을 소개해 드리려고 합니다.

---

jquery-drag-check 

Site : https://github.com/scarlac/jquery-drag-check

Demo : http://www.seph.dk/jquery-dragcheck/demo.html

---

사용법은 간단합니다.

아래 한줄을 추가해 주시면 됩니다.

$('input[type=checkbox]').dragCheck();

결과

응용을 해보도록 하죠.

다음메일이나 네이버메일처럼 체크박스를 선택하면 해당 라인에 background-color를 주는 효과를 내보도록 하겠습니다.

소스는 다음과 같습니다.

$('.chkbox').change(function() {
  if($(this).is(":checked")) {
   $(this).closest('tr').css("background-color","#E4E9F6");
  }else {
   $(this).closest('tr').css("background-color","");
  }
});

체크박스 선택 시 체크 여부에 따라 background-color를 변경시키는 로직입니다.

결과

	내용1
	내용2
	내용3
	내용4
	내용5