jquery의 체크 박스를 클릭하면 CSS 클래스가 토글됩니다.

Question

서버에서 실행할 때 테이블을 형성하는 asp.net gridview가 있습니다. 나는 같은 ID를 가진 각 테이블 행에 html 체크 박스를 가지고있다. 다음 표는

,

<table> 
    <tr> 
     <td class="column"> 
      <div id="favicon" class="class-icon"> 
       <input type="checkbox" id="chkSelected" onclick=check(); "> 
      </div> 

     </td> 
     <td class="column "> 
      <div id="favicon " class="class-icon "> 
         <input type="checkbox " id="chkSelected " onclick=check();"> 
      </div> 
     </td> 
    </tr> 
</table> 

gridview에 여러 행 파크 - 결합된다. 확인란을 선택했을 때 해당 확인란의 부모 div의 CSS 클래스를 토글해야합니다. 그러나 다른 모든 체크 박스는 아닙니다. 여기

내가 노력 코드,

$("#chkSelected").closest('tr').find('div').toggleClass('active'); 

입니다 그러나 그것은 일을 didnot. parent() 기능을 사용해 보았습니다. 누구든지이 문제를 해결할 수 있도록 도와주십시오.

미리 감사드립니다.

Answer 1

요소는 고유 ID

$(".chkSelected").live("click",function(){ 
    $(this).parent('div').toggleClass("active"); 
}); 

http://jsfiddle.net/pLxGk/3/

Answer 2

요소의 ID는 고유해야합니다, 당신은

jQuery(function ($) { 
    $('.chkSelected').change(function() { 
     //the targeted div is the parent, so you can use .parent(), no need to use .closest(...).find(...) 
     $(this).parent().toggleClass('active'); 
     //$(this).closest('tr').find('div').toggleClass('active'); 
    }) 
}) 

Answer 3

사용해야 handlder

 <td class="column"> 
      <div class="class-icon favicon"> 
       <input type="checkbox" class="chkSelected"/> 
      </div> 
     </td> 
    </tr> 
</table> 

다음의 jQuery 이벤트를 사용하는 대신 그룹과 유사한 요소 클래스를 사용

$("#chkSelected").parent('div.class-icon').toggleClass('active'); 

그리고 체크 박스에는 고유 한 ID가 있어야합니다. HTML의