I am trying to create a checkbox with label. When user click the label, it will check if checkbox checked. The first time, I click the label, the box is checked, but no alert action. After I click the second time, it start to function, alert action happen. What did I do wrong. I have tried to use individual ID. Click not working either.

```js
<script type="text/javascript">
  var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };

  jQuery.each( elements, function( id_name, num ) {

    $('#'+ id_name).click(function(){

       if ($('#'+id_name +'_checkbox').prop('checked')) {
             alert('Checked');
         }else{
           alert('unchecked');
           }
       });
  });
</script>
```

```html
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>

<input type="checkbox" name="emo_checkbox"  id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>

<input type="checkbox" name="emo_checkbox"  id="emo_cute_checkbox"> 
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
```