Question

我有一个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]

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

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设置click处理程序来选择具有该属性的所有元素：

$(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的用户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><input type="checkbox" id="Checkbox1"> Text</label>

以下是两个JSFiddle：http://jsfiddle.net/m4rK5/

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

5 个答案: