How to Handle Radio Event When Icheck-Helper Is Used

How to handle radio event when iCheck-helper is used?

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

$('#bg-effect').on('ifChanged', function(event){
alert(event.type + ' callback');
});

Bootstrap ICheck can not listen changed event

I found useful fix as has been correctly answered from github forum :read from this thread and How to handle radio event when iCheck-helper is used?

Then I changed my code. The problem has be solved.

$("input[name='display-method']").iCheck({radioClass: 'iradio_flat-green'});

this.init = function() {
$.ajax({
"url": "/cms/api/task_management/init",
"contentType": "application/json",
"dataType": "json",
"type": "POST"
}).done(function(map) {
if ($("#title").val() || $("#problemCls").val() || $("#targetFunc").val() || $("#status").val() || $("#priority").val()) {
search();
} else {
callBackInit(map);
}
$("input[name='display-method']").on("ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed check", function (event) {
if ($("#display-method-unique").prop("checked")) {
renderDataTable(self.taskManagementList);
} else {
renderDataTable(self.allDataList);
}
});
}).fail(failCallback);
};

iCheck library: value of selected radio button

You must use iCheck like this

$(document).ready(function () {
$('input[name="iCheck"]').on('ifClicked', function (event) {
alert("You clicked " + this.value);
});
$('input').iCheck({
radioClass: 'iradio_flat-orange'
});
});

DEMO

Documentation

Bootstraps ICheck-Helper does not trigger on changed event

Use ifChanged or ifChecked mentioned in the documentation (web archive version)

$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
});

icheck set dynamically checked for checkbox or radio button using jquery

Make your ajax call, then in the callback check the returned data and use iCheck() function to check the desired element.

Example :

$.get('url', {}, function( data ){
if ( data === "Y" ){
$(':radio[name=kitchen][value=Y]').iCheck('check');
} else {
$(':radio[name=kitchen][value=N]').iCheck('check');
}
});

Hope this helps.

$('input').iCheck({  checkboxClass: 'icheckbox_minimal',  radioClass: 'iradio_minimal',  increaseArea: '20%' // optional});
var data = "N";
if ( data === "Y" ){ $(':radio[name=kitchen][value=Y]').iCheck('check');} else { $(':radio[name=kitchen][value=N]').iCheck('check');}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet" /><div class="checkbox">  <label>Is Kitchen <input type="radio" name="kitchen" value="Y" class="flat">      Yes <input type="radio" name="kitchen" value="N" class="flat"> No    </label></div>

Radio box, get the checked value [iCheck]

Attach a handler to ifChanged event:

$('input').on('ifChecked', function(event){
alert($(this).val()); // alert value
});

There are 11 ways to listen for changes:

  • ifClicked - user clicked on a customized input or an assigned label
  • ifChanged - input's checked, disabled or indeterminate state is changed
  • ifChecked - input's state is changed to checked
  • ifUnchecked - checked state is removed
  • ifToggled - input's checked state is changed
  • ifDisabled -input's state is changed to disabled
  • ifEnabled - disabled state is removed
  • ifIndeterminate - input's state is changed to indeterminate
  • ifDeterminate - indeterminate state is removed
  • ifCreatedinput - is just customized
  • ifDestroyed - customization is just removed

JSFIDDLE



Related Topics



Leave a reply



Submit