Loop through an array of checkboxes and insert values - php

Question

First time posting, hope all goes well :)
Been working on this for a while but basically I'm doing something like this: http://drupal.org/project/fancycheckboxes
I need to set a value of yes/no for each checkbox that I'm looping through and right now it works but is changing the value of all when I change one.
My foreach loop:
<?php $object = new stdClass(); $i = 0; ?>
<?php foreach( $filters as $key => $value ) {
?>
<tr>
<td><label for="show_filter">Show <?php echo $object->$key = $value['filter']; ?> Filter</label></td>
<td><input type="checkbox" class="show_filter" <?php //if ( $row['active_filter'] === 'yes' ) { ?>checked="checked"<?php //} ?> name="dp_show_filter" value="<?php echo $object->$key = $value['active_filter']; ?>"/><?php echo $object->$key = $value['active_filter']; ?></td>
<td><a class="button-primary" href="?page=profolio_theme&del=<?php echo $row['id'];?>">Delete</a></td>
</tr>
<?php
$i++;
}
and my jQuery:
jQuery(document).ready(function(e) {
var $ = jQuery.noConflict();
$i = 0;
customCheckbox = $('.dp_wrap input[type="checkbox"]');
showFilter = $('.dp_wrap input[name="dp_show_filter"]');
values = [];
return customCheckbox.each(function() {
// the element
var el = this;
// Hide checkbox
$(this).hide();
// Replace element
var rep = $('<span></span>').addClass('dp-checkbox').insertAfter(this);
// default state
if( $(showFilter).val() === 'yes'){
$(showFilter).prop('checked', true);
$(rep).removeClass('off').addClass('on');
} else {
$(showFilter).prop('checked', false);
$(rep).removeClass('on').addClass('off');
}
if($(this).is(':checked') ) {
$(rep).addClass('on');
} else {
$(rep).addClass('off');
}
// Click event
$(rep).click(function(e) {
e.preventDefault();
if( $(el).is(':checked') ) {
values.push($(showFilter).val('no'), ++$i);
$(el).prop('checked', false);
$(rep).removeClass('on').addClass('off');
} else {
values.push($(showFilter).val('yes'), ++$i);
$(el).prop('checked', true);
$(rep).removeClass('off').addClass('on');
}
});
});
});
Currenty my values are posting to a database as yes/no.
Any help is greatly appreciated and I hope my first post is an acceptable one.

Answer 1

It is changing all of the values as it looks as though you are giving the same name to every checkbox created on your page.
You can change your PHP code to something more like this:
<?php $object = new stdClass(); $i = 0; ?>
<?php foreach( $filters as $key => $value ) {
?>
<tr>
<td><label for="show_filter">Show <?php echo $object->$key = $value['filter']; ?> Filter</label></td>
<td><input type="checkbox" class="show_filter" <?php //if ( $row['active_filter'] === 'yes' ) { ?>checked="checked"<?php //} ?> name="dp_show_filter_<?php echo $row['id'] ?>" value="<?php echo $object->$key = $value['active_filter']; ?>"/><?php echo $object->$key = $value['active_filter']; ?></td>
<td><a class="button-primary" href="?page=profolio_theme&del=<?php echo $row['id'];?>">Delete</a></td>
</tr>
<?php
$i++;
}
Then change your default state to this and remove the if statement from underneath it:
// default state
if( $(this).val() === 'yes'){
$(this).prop('checked', true);
$(rep).removeClass('off').addClass('on');
} else {
$(this).prop('checked', false);
$(rep).removeClass('on').addClass('off');
}
I am pretty sure that will fix your problem as you described it. It is hard to tell without a more complete example of your code.

Answer 2

You iterate through your customCheckbox array with an each, but inside your loop, you access $(showFilter), which is a global array.
Did you mean $(showFilter[i]) ?
The each callback receives i (the index in the loop) as a parameter :
return customCheckbox.each(function(i) {
...
if( $(showFilter[i]).val() === 'yes'){ ...