본문 바로가기

개발/JAVASCRIPT

[jQuery] 동적 생성된 테이블 tr 클릭시 체크박스 처리

   
   
   
   

이런 모양의 테이블을 동적으로 생성한다는 가정하에,

한 줄을 눌렀을 때(행) 맨 앞 체크박스가 클릭 되도록 하고 싶다!

 

이정도는 껌이다.

$("#tableId").on('click', 'tr', function(){
    var chkbox = $(this).find('td:first-child :checkbox');
    chkbox.prop('checked', !chkbox.prop('checked'));
}

 

하지만 체크박스를 직접 누를 시에는

checkbox를 클릭을 해도 tr을 클릭한 상태로 인식을 하여서 checkbox가 눌려지지 않는다.

 

그래서 !

$("#tableId").on('click', 'tr', function(e){
    if( $(e.target).is('input:checkbox') ) return;
    var chkbox = $(this).find('td:first-child :checkbox');
    chkbox.prop('checked', !chkbox.prop('checked'));
});
		​

눌릴 때에 target을 체크해서 checkbox면 return을 시키도록

바꾸어 보았다.

 

(혹시 더 좋은 방법이 있으시면 공유 좀 부탁 드립니다..)

 

 

반응형