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 labelifChanged
- input's checked, disabled or indeterminate state is changedifChecked
- input's state is changed to checkedifUnchecked
- checked state is removedifToggled
- input's checked state is changedifDisabled
-input's state is changed to disabledifEnabled
- disabled state is removedifIndeterminate
- input's state is changed to indeterminateifDeterminate
- indeterminate state is removedifCreatedinput
- is just customizedifDestroyed
- customization is just removed
JSFIDDLE
Related Topics
How to Create a Marquee Using CSS or JavaScript
How to Get Default Font Size in Pixels by Using JavaScript or Jquery
Random Fullscreen Background Image on Browser Refresh
Horizontal Slideshow with Divs
How to Dynamically Change the Style Tag Using JavaScript
Disable Inertia Scroll for "Single-Page" Webapp
JavaScript .Replace Alternative
How to Measure the Space That a Text Will Take in JavaScript
How to Detect State of CSS Transition via Js and Skip It
How to Organize Minification and Packaging of CSS and Js Files to Speed Up Website
Write Custom Text on Image Canvas with Fabric.Js and HTML5
Remove Styles from Text When Copying/Cutting Using CSS or JavaScript
How to Detect When an HTML Element's Class Changes
Expand/Collapse Mobile Navbar Without JavaScript
Jquery Example (In Jsfiddle) Working in Firefox But Not in IE8, 7