jQuery iCheck 回调

Question

我正在使用 Jquery iCheck 来设置输入字段的样式，但我无法真正处理来自 iCheck 的回调。我要检索的内容是具有给定类名的容器内的所有检查输入值

http://jsfiddle.net/lgtsfiddler/E4bKg/1/ 这是我一直在尝试的，但在第二次点击时不会将点击的元素推送到数组中。

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