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

<input id="CheckBox1" type="checkBox" /></div>
<label id="lblAssociateWithCheckBox" title="Check"></label>

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

更新：刚刚在Pavan的回答中看到了你想要使用非标签元素作为标签的评论,例如span元素.我的第一反应是为什么？但是,如果你真的想要,你可以轻松地做到这一点,而无需编写大量代码并在JavaScript中硬编码大量元素ID(这似乎是你现有代码的目前路径).

在要用作伪标签的元素中使用数据属性,如下所示：

<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',oldVal) { return !oldVal; });

(但同样,只需使用for属性在html标记中执行此操作.)