html icheck插件的使用

在前端用到的比较实用的插件

引入css文件 ,js文件  icheck

$('input').iCheck({
        checkboxClass: 'icheckbox_minimal-green',
        radioClass: 'iradio_minimal-green',
        increaseArea: '20%' // optional
    });

select_first是input父级class

$(".select_first:first-child").find('.iradio_minimal-green').addClass('checked');
$(".select_first:first-child").find('input[name=table_name]').attr('checked',true);

进行添加checked这个class 插件在底层就会进行修改 background-position

底层css文件

.iradio_minimal-green {
    background-position: -100px 0;
}
.iradio_minimal-green.hover {
    background-position: -120px 0;
}
.iradio_minimal-green.checked {
    background-position: -140px 0;
}
.iradio_minimal-green.disabled {
   background-position: -160px 0;

   cursor: default;

}

.iradio_minimal-green.checked.disabled {
   background-position: -180px 0;
}

 

它是一种雪碧图,进行修改距离就好