jQuery iCheck回调

Question

我正在使用Jquery iCheck来对输入字段进行样式化，而且我已经到了无法真正处理来自iCheck的回调的地步。我想要检索的是，在具有给定类名的容器中检查的所有输入值。

这里是我一直在尝试的http://jsfiddle.net/lgtsfiddler/E4bKg/1/，但是在flow上单击的元素不会在第二次单击时按在数组中。

  <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>

代码：

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

那么，在检查完这个类之后，如何检查这个类呢？

Answer 1

您可以不检查类，而可以选中原始复选框，并从父节点获取按钮描述。

附带注意，我使用ifToggled事件，以便为选中和未选中的元素触发它。

代码：

$('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);
}

演示：http://jsfiddle.net/IrvinDominin/S2NdY/