Bootstrap ICheck can not listen changed event

Question

I have this jQuery code to be updating radios base on whether a radios has been checked. However, this does not fire.

Code

    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);
        }
    }).fail(failCallback);
    $("input[type='radio']").on("ifChanged", function (event) {
        if ($("#display-method-unique").prop("checked")) {
            renderDataTable(self.taskManagementList);
        } else {
            renderDataTable(self.allDataList);
        }
    }).iCheck({
        radioClass: 'iradio_flat-green'
    });

HTML

<div class="row">
     <div class="col-md-4 col-sm-12 col-xs-12">
          <div class="radio">
               <input type="radio" name="display-method" id="display-method-unique" class="flat"><label for="display-method-unique">Doing</label>
               <input type="radio" name="display-method" id="display-method-all" class="flat"><label for="display-method-all">End</label>
           </div>
    </div>
</div>

I've also tried binding to the click function and change function. But the change event can't be listened. However neither seem to work. Everything does work fine when I don't add in the Icheck.js script.

Does anybody know how to hook into on changed event from bootstraps Icheckhelper class?

Can you put the code in a jsfiddle like this one? https://jsfiddle.net/aljon254/LuuLrm6d/ or this one? https://jsfiddle.net/bantikyan/jcfekw2j/2 or this one? http://jsfiddle.net/amindunited/47nq6at7/ — react_or_angluar, Dec 16 '20 at 01:31
A similar question has been asked before, see here does it help you? https://stackoverflow.com/questions/20832568/click-event-not-firing-within-a-bootstrap-radio-button-group There's no click event on radio buttons so you have to detect if the first radio has changed like this: http://jsfiddle.net/hmartiro/g4YqD/1/ — Nathaniel Flick, Dec 16 '20 at 01:41
@NathanielFlick Thank you for your answer. After I used iCheck.js, it cann't be worked. — Xin Liu, Dec 16 '20 at 01:50
use ifChanged event from iCheck; https://stackoverflow.com/questions/25562062/how-to-handle-radio-event-when-icheck-helper-is-used — Nathaniel Flick, Dec 16 '20 at 03:27
@NathanielFlick Thank you very much! It is useful, the problem has be solved. — Xin Liu, Dec 16 '20 at 07:05

score 1 · Accepted Answer · answered Dec 16 '20 at 07:18

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);
};

Bootstrap ICheck can not listen changed event

1 Answers1