循环遍历复选框数组并插入值

Question

第一次发帖，希望一切顺利:)

已经为此工作了一段时间，但基本上我正在做这样的事情：http://drupal.org/project/fancycheckboxes

我需要为我正在循环的每个复选框设置一个值是/否，现在它可以工作，但是当我更改一个时会更改所有的值。

我的 foreach 循环：

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

还有我的 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 = $('<a href="#"><span></span></a>').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');
                    }
                });
            });
});

目前我的值以是/否的形式发布到数据库。

非常感谢任何帮助，我希望我的第一篇文章是可以接受的。

Answer 1

它正在更改所有值，就像您为页面上创建的每个 checkbox 赋予相同的名称一样。

你可以把你的 PHP 代码改成这样：

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

然后将您的 default state 更改为此并从其下方删除 if 语句：

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

我很确定这将解决您所描述的问题。如果没有更完整的代码示例，很难判断。

Answer 2

您使用each 遍历您的customCheckbox 数组，但在循环内部，您访问的是一个全局数组$(showFilter)。

您是说$(showFilter[i]) 吗？

each 回调接收i（循环中的索引）作为参数：

return customCheckbox.each(function(i) {
    ...

    if( $(showFilter[i]).val() === 'yes'){ ...