Ignore value radiobuttons - iCheck

I try this way for get a value from radiobuttons (iCheck), but all the time only return the value from the first radio, ignoring the remaining. The theory says that the code is fine, even so it returns badly.

Radio box, get the checked value [iCheck]

My code:

<div class="step row">
  <div class="col-md-10">
    <h3>YYYYYY.</h3>
    <ul class="data-list-2">
      <li><input name="p1" id="p1" type="radio" class="required check_radio" value="1"><label>Yes</label></li>
      <li><input name="p1" id="p1" type="radio" class="required check_radio" value="0"><label>No</label></li>
      <li><input name="p1" id="p1" type="radio" class="required check_radio" value="2"><label>Meybe</label></li>
    </ul>
  </div>
</div>
<!-- end step -->

My method for get value:

$(document).ready(function() {
  $('#p1').on('ifChecked', function(event) { //try ifClicked - ifToggled 
    alert($(this).val()); // alert value
  });
});

All the time return value 1 even when another option is selected.

Please help, I try all the night different ways but doesn't work ;(

Solution

I'm not sure how you are generating the ids for your radio buttons, but the id property should always be unique, since you want the same event handling on your radio buttons, just use the class so that it attaches the event to all your radio buttons which belong to that class, then you don't have to add events for each individual id:

So instead of this:

//If you did it this way, you'd have to have one of these blocks for each
//unique id belonging to a radio button
$('#p1').on('ifChecked', function(event){ //try ifClicked - ifToggled 
  alert($(this).val()); // alert value
});

Change it to this:

//Use the class instead so that the same event handling can be added to all radio
//buttons in one block of code
$('.required.check_radio').on('ifChecked', function(event){ //try ifClicked - ifToggled 
  alert($(this).val()); // alert value
});