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