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

这很有效，直到您按下复选框本身，然后它才能工作。我的猜测是复选框会自行检查，然后运行javascript并再次将其反转。

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

编辑：很抱歉没有澄清，我需要能够按下整个td标记，这不适用于标签：http://jsfiddle.net/toxu1v2o/4/

SOLUTION：

不使用this，而是使用event。然后检查是否按下了复选框。像这样：

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

Answer 1

您不需要JavaScript - 只需将checkbox和文本包装在<label />元素中：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以这样试试

＆＃13;

<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>

＆＃13;

Answer 3

包裹你的input＆amp;带有key标记的<label>。希望它能够发挥作用！

Answer 4

这对你有用吗？您使用的是什么版本的jquery？

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

按表格行时选中复选框

4 个答案: