单击描述时选中复选框

Question

我将创建一个由jQuery和JSON构建的复选框列表。该列表将是可以发送消息的群组的选择。可能是一个或多个组。这部分我可以解决。我遇到的问题是如何启用描述，以便当我点击描述时，复选框被选中。

<div>
    <label for="group">
        Select lists
    </label>
</div>
<div>
    <input type="checkbox" name="group" id="group" value="1" title="Main List" />Main List
    <input type="checkbox" name="group" id="group" value="2" title="Secondary List" />Secondary List
</div>

- Mike Wills

Answer 1

使用带有for属性的标签（我为复选框分配了不同的ID）：

<div>
    <label for="group">
        Select lists
    </label>
</div>
<div>
    <input type="checkbox" name="group" id="group1" value="1" title="Main List" />
    <label for="group1">Main List</label>
    <input type="checkbox" name="group" id="group2" value="2" title="Secondary List" />
    <label for="group2">Secondary List</label>
</div>

- Chandu

---

我还不能将其标记为答案，但这正是我在寻找的。我知道有些地方不对，只是一直找不到答案。谢谢！ - Mike Wills

Answer 2

一个不使用 "for" 属性的不同解决方案是将每个 <input /> 字段包含在 <label></label> 标签中。

例如：

<label><input type="checkbox" value="" /> Click Here to Check This</label>

如果您需要将复选框与标签显示为inline-block，那么这可能是一个解决方案。

- Janaka R Rajapaksha

Answer 3

首先，您有一个重复的id。 id应该是唯一的。

最简单的方法是使用label标签，例如：

<input type="checkbox" name="group" id="group_1" />
<label for="group_1">description</label>

现在，您可以点击文本，它将切换复选框。另一种选择是使用jQuery的click函数：http://www.google.com/#q=jquery+check+checkbox+on+click。

- Alec

Answer 4

如果你不想使用“标签”，也可以使用jQuery。

 <input type="checkbox" name="SelectionCheckbox" id="SelectionCheckbox" />  
<div onclick="$('input[id $=SelectionCheckbox]').attr('checked', this.checked);"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>

- Greg

Answer 5

<label style="cursor:pointer" for="clickme">clickme</label><br>
<span><input id="clickme" type="checkbox"/>anand</span> 

- Shijo Rs

Answer 6

你必须为“input”标签中的“id”以及“label”标签中的“for”两个属性都分配相同的值。

<input type="checkbox" id="web">
<label for="web">Web research</label>

<input type="checkbox" id="shop">
<label for="shop">Shopping</label>

- drac_o