jQuery iCheck callback

icheck, jquery, plugins

Solution

Instead of checking classes you can check the original checkbox, and get the button description from the parent.

Side note, I use `ifToggled` event so it will be fired for checked and unchecked elements.

Code:

$('ul.brands input').each(function () {
    var self = $(this),
        label = self.next(),
        label_text = label.text();

    label.remove();
    self.iCheck({
        checkboxClass: 'icheckbox_line-blue',
        radioClass: 'iradio_line',
        insert: '<div class="icheck_line-icon"></div>' + label_text
    });
});

$('ul.brands input').on('ifToggled', function (event) {
    brands();
});

function brands() {
    var brands = [];
    $('ul.brands input').each(function (index, value) {
        if ($(this).is(':checked')) {
            brands.push($(this).parent().text());
        }
    });
    console.log(brands);
}

Demo: http://jsfiddle.net/IrvinDominin/S2NdY/

Problem

I'm using Jquery iCheck to style input fields and I came to a point where I can not really handle the callback from iCheck. What I want to retrive, all checked input values inside container with a given class name http://jsfiddle.net/lgtsfiddler/E4bKg/1/ here is what I have been trying but the clicked elemnt on flow is not going to be pushed in array just on the second click. ``` <ul class="brands"> <li> <input class ="marken" type="checkbox" name="brand" value="brand1"> <label>brand1</label> </li> <li> <input class ="marken" type="checkbox" name="brand" value="brand1"> <label>brand2</label> </li> <li> <input class ="marken" type="checkbox" name="brand" value="brand1"> <label>brand3</label> </li> <li> <input class ="marken" type="checkbox" name="brand" value="brand1"> <label>brand4</label> </li> </ul> ``` Code: ``` $(document).ready(function () { //here I style with iCheck $('ul.brands input').each(function () { var self = $(this), label = self.next(), label_text = label.text(); label.remove(); self.iCheck({ checkboxClass: 'icheckbox_line-blue', radioClass: 'iradio_line', insert: '<div class="icheck_line-icon"></div>' + label_text }); }); //Register click event $('ul.brands input').on('ifClicked', function (event) { brands(); }); }); //here I try to retrieve all checked values function brands() { var brands = []; $('ul.brands li div.icheckbox_line-blue').each(function (index, value) { var attr_class = $(value).attr('class'); console.log(attr_class); //check if icheckbox_line-blue class contains checked if (attr_class.indexOf("checked") !== -1) { brands.push($(value).find('input').val()); } }); console.log(brands); } ``` so how to check this class after was checked?

Original source