单击描述时选中复选框

时间:2011-01-14 21:35:02

标签: html asp.net-mvc checkbox

我将创建一个由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>

6 个答案:

答案 0 :(得分:66)

使用带有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>

答案 1 :(得分:35)

另一种解决方案(不使用“for”属性)包含<input />个标记内的每个<label></label>字段。

示例:

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

如果您必须显示标签为inline-block的复选框,则可以使用此解决方案。

答案 2 :(得分:13)

首先:你在那里有一个重复的idid应该是唯一的。

最简单的方法是使用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

答案 3 :(得分:1)

答案 4 :(得分:0)

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

答案 5 :(得分:0)

您必须同时为'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>