Q:

Checkbox check first time not working, after second time, it is OK

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.

<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>
<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>

A:

<script type="text/javascript">
    $('label').click(function() {
        if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
            alert('Checked');
        }
        else {
            alert('Unchecked');
        }
    });
</script>

<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>

Also be sure, you have included jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

And in new version of jQuery you can use insted of this:
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
    alert('Checked');
}
else {
    alert('Unchecked');
}

This piece of code:
// Just be careful, its inverted. Because, when you click label to check checkbox, the checkbox is still unchecked, and after alert will be checked...
if ($('#'+ $(this).attr('id') + '_checkbox').is(':checked') {
    alert('Unchecked');
}
else {
    alert('Checked');
}

Workind DEMO here in jsFiddle

