单击关联标签时选中复选框

Question

我有一个复选框checkbox和一个在label中的描述。我希望当点击标签时，可以勾选复选框。

标记：

<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]

我的错误在哪里？如果这不是一个正确的方法，请提供一种替代方法。

- 4b0

Answer 1

您不需要编写jQuery代码。 您可以使用HTML完成此操作。

请按以下方式更改您的HTML内容：

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

这是 JSFiddle 的链接：http://jsfiddle.net/sjG4w/

- Pavan

---

就像Pavan所说的那样，您不需要JS来完成这个任务，这是HTML的本地方法。标签的“for”属性对应于复选框的“id”。 - Barry Chapman

@Pavan 标签不总是 label。可能是 span。我检查了一下，span 不接受 for 属性。由于我要反复执行此任务，因此我想要一个可以在任何地方调用的函数。 - 4b0

Answer 2

更新：刚看到您在Pavan的答案下的评论，希望使用非label元素作为标签，例如span元素。我的第一反应是为什么？但如果你真的想这样做，你可以很容易地实现，而不必在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; });
     });

});

这是一个演示，展示了一个短函数如何将行为应用到span、label和div上：http://jsfiddle.net/TFD72/ 原始答案：

正如Pavan所解释的那样，您可以通过在标签中使用“for”属性来自动完成此操作，但是关于为什么您的代码无法工作：

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

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

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

CheckCheckBox('lblAssociateWithCheckBox', 'Checkbox1');

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

然而，你当前的函数会在每次单击标签时都将复选框设置为"checked"，即使它已经被选中了。如果你想要切换选中和未选中状态（即正常行为），你可以像这样做：

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

（但是，同样可以在HTML标记中使用 for 属性来完成它。）

- nnnnnn

---

关于 "My first response is why?" 等问题：你能把它移到应该在的评论区吗？ - Peter Mortensen

@PeterMortensen - 我宁愿不这样做：那句话是我的答案的一部分，因为我想要引起注意，使用非标签元素作为标签是一种非标准的做法。 - nnnnnn

Answer 3

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

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

另一种方式，我更喜欢的是将复选框包裹在标签标签内：

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

这是两个 JSFiddle 链接，一个用于 HTML，另一个用于 CSS： http://jsfiddle.net/m4rK5/

- Justin

---

谢谢。我不知道第二种方法。 - chetan

Answer 4

你可以通过以下方式实现：

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

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

- Jigar Pandya

Answer 5

如果您经常使用 label 和 checkbox，那么请确保它们的 for 属性和 checkbox 的 id 相同。例如：

<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);
    });
}

- thecodeparadox