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

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标记中执行此操作。）

Answer 3

你可以这样做

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

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

Answer 4

如果你总是使用label和checkbox那么用户for label属性和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);
    });
}

Answer 5

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

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

另一种方式，我更喜欢将复选框包装在label标签中：

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

这是两个JSFiddle： http ： //jsfiddle.net/m4rK5/