6

I want to handle the radio button on change event. But, as the designer has already used iCheck-helper, the actual radio actions are not performed when the code is run.

Below is the code

<div class="radio-wrap">
   <input type="radio" id="bg-effect" value="full" />Full Image
</div>

When we run the code and inspect the code in chrome, the generated HTML is as below.

<div class="radio-wrap">
  <div class="iradio_minimal-grey checked"><input type="radio" id="bg-effect" value="full" checked="" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div>Full Image
</div>

To capture the selected value, I want to handle the change event for this radio button.

KiranD
  • 433
  • 2
  • 7
  • 20

2 Answers2

17

According to documentation, you can use ifChanged event like this:

$('#bg-effect').on('ifChanged', function(event){
    alert(event.type + ' callback');
});
Ilya Luzyanin
  • 7,910
  • 4
  • 29
  • 49
  • It worked. Thanks. But, I'm struggling to get the selected radio value. Please suggest. – KiranD Sep 01 '14 at 23:46
  • 5
    $('input[name="bg-effect"]').on('ifClicked', function(event){ alert("You clicked " + this.value); – KiranD Sep 01 '14 at 23:57
  • With the above code I achieved what I wanted. Thanks :) – KiranD Sep 01 '14 at 23:58
  • Worked for me, the key was trying to figure out which html tag and which attribute to choose in the selector - should have been obvious and debugging in browser was confusing as the did not see to be the one receiving the checked attribute. This answer solved it for me. +1 for putting a link to the docs in your answer. – qxotk Jan 15 '18 at 15:32
3

I ran throught the same problem,later i found useful fix as has been correctly answered from github forum : read from this thread

The following was a fix:

$('input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed check ', function(event){                
                    if(event.type ==="ifChecked"){
                        $(this).trigger('click');  
                        $('input').iCheck('update');
                    }
                    if(event.type ==="ifUnchecked"){
                        $(this).trigger('click');  
                        $('input').iCheck('update');
                    }       
                    if(event.type ==="ifDisabled"){
                        console.log($(this).attr('id')+'dis');  
                        $('input').iCheck('update');
                    }                                
                }).iCheck({
                    checkboxClass: 'icheckbox_minimal-green',
                    radioClass: 'iradio_minimal-green'
                        //increaseArea: '20%'
                });
Ansy
  • 47
  • 1
  • 7