Установите флажок при нажатии на строку таблицы

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')); 
} 

Это прекрасно работает, пока вы не нажмете сам флажок, то он не будет работать. Я предполагаю, что checkbox проверяет себя, затем запускается javascript, и он снова меняет его.

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

EDIT: Извините за не уточнения, мне нужно, чтобы быть в состоянии нажать на весь td тег, это не будет работать с этикетками: http://jsfiddle.net/toxu1v2o/4/

РЕШЕНИЕ:

Вместо используя this, используйте event. Затем проверьте, нажата ли эта кнопка или нет. Что-то вроде этого:

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

Answer 1

Вам не нужно JavaScript для этого - просто оберните 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

Wrap как ваш 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>