Question: I have a `checkbox` and a description of the checkbox in `label`. I want to `check` Checkbox when label is clicked.

Markup:

```
<input id="Checkbox1" type="checkbox" /></div>
<label id="lblAssociateWithCheckBox" title="Check"></label>

```

In jQuery I try:

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

```

But it does not work. I got an error in Firebug.

> 
> uncaught exception: Syntax error, unrecognized expression: #[object Object]
> 
> 
> 

What is my mistake? If this is not a proper way to do this suggest an alternative way.

Answer: 
**Update:** Just saw your comment under Pavan's answer about wanting to use non-label elements as labels, e.g., span elements. My first response is *why*? But if you really want to you can do this easily without having to write lots of code and hardcode lots of element ids in your JavaScript (which seems to be the path you're currently on with your existing code).

Use a `data` attribute in the element you want to use as the pseudo-label, as follows:

```
<span data-labelfor="name">Name</span>
<input type="checkbox" id="name">

```

And then you can setup the click handler with some generic jQuery to select all elements with that attribute:

```
$(document).ready(function() {

     $("[data-labelfor]").click(function() {
         $('#' + $(this).attr("data-labelfor")).prop('checked',
                          function(i, oldVal) { return !oldVal; });
     });

});

```

Working demo that shows that one short function applying the behaviour to a span a label and a div: <http://jsfiddle.net/TFD72/>

**Original answer:**

As Pavan already explained, you can do this automatically by using the `for` attribute in your label, but as far as why your code didn't work:

Your call to the `CheckCheckBox()` function is passing two jQuery objects as parameters as follows:

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

```

But the function is treating those parameters as if they were strings holding the ids of the elements you want to process. So if you want to keep your function as is just change the way you call it to pass the right sort of parameter:

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

```

That should fix the error you quote.

However, your function as is will set the checkbox to "checked" on every click of the label, even if it was already checked. If you want it to toggle between checked and unchecked (i.e., normal behaviour) you can do something like this:

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

```

(But again, just do it in the html markup using the `for` attribute.)
You can do this by 

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

```

In `ClickedLabel` you can find the passed element and if it is checked do uncheck and if unchecked do check it.