单击描述时选中复选框

Posted 2023-03-05

【中文标题】单击描述时选中复选框

【英文标题】：Check checkbox when clicking on description

【发布时间】：2011-06-09 10:23:38

【问题描述】：

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

【参考方案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>

【讨论】：

我还不能标记为答案，但这就是我要找的。我知道有些不对劲，我只是无法在任何地方找到答案。谢谢！

【参考方案2】：

另一种解决方案（不使用“for”属性）是将每个<input /> 字段包含在<label></label> 标记内。

例子：

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

如果您必须显示带有inline-block 标签的复选框，这可能是一个解决方案。

【参考方案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。

【参考方案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>

【参考方案5】：

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

【参考方案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>