单击关联标签时选中的复选框答案

【问题标题】：Check box checked when click in associated label单击关联标签时选中的复选框
【发布时间】：2018-12-16 20:11:41
【问题描述】：

我有一个checkbox 和label 中复选框的描述。点击标签时我想check复选框。

标记：

<input id="Checkbox1" type="checkbox" /></div>
<label id="lblAssociateWithCheckBox" title="Check"></label>

在 jQuery 中我尝试：

$(document).ready(function() {
            CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1'));
            function CheckCheckBox(lblID, chkID) {
                $('#' + lblID).live("click", function() {
                    return $('#' + Checkbox1).attr('checked', 'checked');
                });
            }
        });

但它不起作用。我在 Firebug 中遇到错误。

未捕获的异常：语法错误，无法识别的表达式：#[object Object]

我的错误是什么？如果这不是正确的方法，请建议另一种方法。

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

您不需要编写 jQuery 代码。您可以使用 HTML 来做到这一点。

如下更改您的 HTML 内容：

<input id="Checkbox1" type="checkbox" />
<label for="Checkbox1"    title="Check">Check ME</label>

这里是 JSFiddle：http://jsfiddle.net/sjG4w/

【讨论】：

就像 Pavan 说的，你不需要 JS，它是 HTML 的原生方法。标签的“for”属性对应复选框的“id”。
@Pavan 标签并不总是label。可能是span。我检查span 不占用for attribute。我重复执行此任务，所以我想要一个函数调用任何地方。

【解决方案2】：

更新：刚刚在 Pavan 的回答下看到您关于希望使用非标签元素作为标签的评论，例如跨度元素。我的第一反应是为什么？但是，如果您真的愿意，您可以轻松地做到这一点，而无需在 JavaScript 中编写大量代码和硬编码大量元素 ID（这似乎是您当前使用现有代码的路径）。

在要用作伪标签的元素中使用data 属性，如下所示：

<span data-labelfor="name">Name</span>
<input type="checkbox" id="name">

然后您可以使用一些通用 jQuery 设置点击处理程序来选择具有该属性的所有元素：

$(document).ready(function() {

     $("[data-labelfor]").click(function() {
         $('#' + $(this).attr("data-labelfor")).prop('checked',
                          function(i, oldVal) { return !oldVal; });
     });

});

工作演示，展示了将行为应用于跨度标签和 div 的一个简短函数：http://jsfiddle.net/TFD72/

原答案：

正如 Pavan 已经解释的那样，您可以通过在标签中使用 for 属性自动执行此操作，但至于您的代码不起作用的原因：

您对CheckCheckBox() 函数的调用将两个jQuery 对象作为参数传递如下：

CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1'));

但是该函数将这些参数视为包含您要处理的元素的 id 的字符串。因此，如果您想保持函数不变，只需更改调用它的方式以传递正确类型的参数：

CheckCheckBox('lblAssociateWithCheckBox', 'Checkbox1');

这应该可以解决您引用的错误。

但是，您的函数会在每次点击标签时将复选框设置为“选中”，即使它已经被选中。如果您希望它在选中和未选中（即正常行为）之间切换，您可以执行以下操作：

 $('#' + Checkbox1).prop('checked', function(i, oldVal) { return !oldVal; });

（但同样，只需在 html 标记中使用 for 属性即可。）

【讨论】：

Re“我的第一反应是为什么？”等：可以移到它所属的cmets吗？
@PeterMortensen - 我不希望：这句话是我回答的一部分，因为我想提请注意这样一个事实，即使用非标签元素作为标签是非标准的事情做。

【解决方案3】：

有两种方法可以在没有任何 JavaScript 的情况下做到这一点。 Pavan解释了第一种方式，即使用for属性（匹配checkbox id）：

<input id="Checkbox1" type="checkbox" />
<label for="Checkbox1" title="Check">Check ME</label>

我更喜欢的另一种方法是将复选框包装在标签标签中：

<label><input type="checkbox" id="Checkbox1"> Text</label>

这是两者的 JSFiddle：http://jsfiddle.net/m4rK5/

【讨论】：

谢谢。不知道第二种方法。

【解决方案4】：

你可以这样做

<label id="lblAssociateWithCheckBox" title="Check" OnClick="JavaScript:ClickedLabel('Check1')" ></label>

在ClickedLabel 中，您可以找到传递的元素，如果选中则取消选中，如果未选中则选中。

【讨论】：

【解决方案5】：

如果您总是使用label 和checkbox，则label 和id 复选框的用户for 属性相同。例如，

<label for="name">Name</label>
<input type="checkbox" id="name">

否则

CheckCheckBox($('#lblAssociateWithCheckBox'), $(#'Checkbox1'));
function CheckCheckBox(lblID, chkID) {
    lblID.live("click", function() {
        return $(this).closest(chkID).attr('checked', true);
    });
}

【讨论】：