javascript - 按下表格行时选中复选框

我正试图允许我的用户在表格行上按下以选中一个复选框。

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

直到您按下复选框本身，此方法才有效，然后它将不起作用。我的猜测是，复选框会自行检查，然后运行javascript并将其再次反向。

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

编辑：对不起，我不清楚，我需要能够按整个td标签，这将无法使用标签：http://jsfiddle.net/toxu1v2o/4/

解：

代替使用this，而是使用event。然后检查其复选框是否被按下。像这样：

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

最佳答案

您不需要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>

关于javascript - 按下表格行时选中复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27440177/