다른 요소에 label for 효과 주기(체크박스 동작)

클릭하기에 너무 작은 체크박스

<input type="radio">체크

그래서 보통 label로 한번 감싸 줘, 보다 클릭하기 쉽게 해주는데요

체크

<label><input type="radio">체크</label>

 

div나 tr, td를 클릭했을때도 체크박스가 체크되면 더욱 편해질거같아 만들어봤습니다

	@@@@@@	##########
1	$$$$$$$$$$	%%%%%%%%
2	^^^^^^^^	&&&&&&&&
3	***********	+++++++++

 

$(document).on('click','table > tbody > tr > td:nth-child(1), th:nth-child(1)',function(e){
    if($(e.target).attr('type') == 'checkbox'){ return true; }// 이 라인이 중요★★★★★
    var radio = $(this).find('input[type=checkbox]');
    var isChecked = radio.prop('checked');
    radio.prop('checked', !isChecked)
});

 

 

중요하다고 표시한 if($(e.target).attr('type') == 'checkbox'){ return true; }

이 구문은

1. e.target >> 이벤트 타겟을 가져와
2. .attr('type') >> 해당 요소의 type을 조회하고
3. 해당 타입이 checkbox면 return true;로 continue 효과를 주는 함수입니다.

return false는 break;   와 동일한 효과를 가지고

return true;는 continue와 동일한 효과를 가지고있습니다.

 

저 구문이 없으면 td, th 클릭 시엔 정상 동작하지만,

checkbox 클릭 시 checkbox의 기본 효과인 클릭 시체크 되는 기능과

위 스크립트가 충돌이 발생하여 값이 변하지않게 됩니다.

 

이상으로 개발자느님들 잘 쓰시길 바라며 글 마무리하겠습니다

감사합니다.