Question

我正在尝试使用checkbox来检查<label>，但需要单击<tr>的行/ <table>。 这可能吗？

我尝试使用jQuery，但是我对结果不满意，因为最终我会选择行内的文本，这不是很用户友好我也尝试过在Chrome上的HTML中对其进行测试

<table border="1">
  <label>
  <!-- This label is expected to be used to check on the checkbox by 
       clicking anywhere on the table row -->
    <tr>
      <td><input type="checkbox" /> Foo</td>
      <td>Bar</td>
    </tr>

  </label>
</table>

我希望当我点击bar时，该复选框会被选中，但没有选中

注意：

由于不可能通过基本的HTML来解决，因此我将结束这个问题

Answer 1

请为此属性设置标签，以下代码将为您提供帮助。

<table border="1">
        <tr>
            <td><input type="checkbox" id="mycheckbox" /> Foo</td>
            <td><label for="mycheckbox">Bar</label></td>
        </tr>
</table>

Answer 2

$('.checkBoxChecked').on('click', function(){
	var checkbox = $(this).find('.Aps_checkbox');
   checkbox.prop("checked", !checkbox.prop("checked"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
    <tr class="checkBoxChecked">
        <td><input type="checkbox" id="mycheckbox" class="Aps_checkbox"/> Foo</td>
        <td>Bar</td>
    </tr>
    <tr class="checkBoxChecked">
        <td><input type="checkbox" id="mycheckbox2" class="Aps_checkbox"/> Foo2</td>
        <td>Bar2</td>
    </tr>
</table>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 3

到目前为止，不可能通过基本的HTML来实现这一目标...

基于W3，它说<label>仅可以影响一个容器级别

类似这样的东西：

法律：

<label>
  <div> AAAA</div>
  <input type="checkbox">
  Some text
</label>

非法：

<label>
  <div> AAAA
    <input type="checkbox">
  </div>
  Some text
</label>

因此，由于我的问题涉及多个级别的容器，因此无法通过常规方式实现

参考：

Mozila Web Reference

在``中使用`<label>`选中复选框

3 个答案: