테이블 행을 누를 때 확인란을 선택하십시오.

Question

사용자가 테이블 행을 눌러 선택란을 선택하도록 허용하려고합니다.

<table> 
    <tr> 
     <td onclick="toggleIt(this)"> 
      <input type="checkbox"/> Option 1 
     </td> 
    </tr> 
    <tr> 
     <td onclick="toggleIt(this)"> 
      <input type="checkbox"/> Option 2 
     </td> 
    </tr> 
</table> 

function toggleIt(myTd) { 
    $(myTd).find('input').prop('checked', !$(myTd).find('input').prop('checked')); 
} 

당신이 다음 실 거예요 작업을 체크 박스 자체를 누를 때까지이 잘 작동합니다. 내 생각 엔 체크 박스가 자체 검사를 한 다음 자바 스크립트가 실행되고 다시 역전됩니다.

jsFiddle : http://jsfiddle.net/toxu1v2o/1/

편집 : 대신

: http://jsfiddle.net/toxu1v2o/4/

해결책 : 죄송합니다 명확하지, 난, 레이블이 늘 일을 전체 td 태그를 눌러 할 수 있어야합니다 this을 사용하는 경우 event을 사용하십시오. 그런 다음 해당 확인란이 눌려져 있는지 확인하십시오. 이런 식으로 뭔가 :

http://jsfiddle.net/toxu1v2o/17/

Answer 1

당신이 자바 스크립트를 필요로하지 않습니다 - 단지 checkbox과 <label /> 요소에있는 텍스트 줄 바꿈 :

td { 
 
    background-color: #F0F0F0; 
 
} 
 
label { 
 
    padding: 40px; 
 
    display: block; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <label> 
 
     <input type="checkbox" />Option 1 
 
     </label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <label> 
 
     <input type="checkbox" />Option 2 
 
     </label> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

랩을 모두 당신을 input & key<label> 태그. 희망은 그것이 일할 것이다!

Answer 3

이 기능이 유용합니까? 그리고 어떤 jquery 버전을 사용하고 있습니까?

$('td').click(function(){ 
    $('input[type="checkbox"]').attr('checked', 'true'); 
}); 

Answer 4

당신이

<table> 
 
    <tr> 
 
     <td> 
 
      <label for="cb1">Op1</label> 
 
      <input id="cb1" type="checkbox"/> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <label for="cb2">Op2</label> 
 
      <input id="cb2" type="checkbox"/> 
 
     </td> 
 
    </tr> 
 
</table>