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

Question

我有一个checkbox和复选框的描述label.check单击标签时我想要Checkbox.

标记:

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

我的错是什么？如果这不是一个正确的方法,这建议另一种方式.

Answer 1

您不需要编写jQuery代码.您可以使用HTML执行此操作.

更改您的HTML内容如下:

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

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

Answer 2

更新：刚刚看到您在Pavan的回答中关于希望使用非标签元素作为标签（例如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; });
     });

});

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

原始答案：

正如Pavan已经解释过的那样，您可以通过使用for标签中的属性来自动执行此操作，但要了解代码无法正常工作的原因：

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

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

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

CheckCheckBox('lblAssociateWithCheckBox', 'Checkbox1');

那应该修复您引用的错误。

但是，按原样使用功能会在每次单击标签时将复选框设置为“已选中”，即使它已被选中也是如此。如果希望它在选中和未选中（即正常行为）之间切换，则可以执行以下操作：

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

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