Модификация фильтра

[burunduchki]

Хочу модифицировать существующий фильтр — в два чекбокса, как показано на картинке:

 

 

Сейчас код фильтра такой:

<div class="panel panel-default">
  <div class="panel-heading"><?php echo $heading_title; ?></div>
  <div class="list-group">
    <?php foreach ($filter_groups as $filter_group) { ?>
    <a class="list-group-item"><?php echo $filter_group['name']; ?></a>
    <div class="list-group-item">
      <div id="filter-group<?php echo $filter_group['filter_group_id']; ?>">
        <?php foreach ($filter_group['filter'] as $filter) { ?>
        <div class="checkbox">
          <label>
            <?php if (in_array($filter['filter_id'], $filter_category)) { ?>
            <input type="checkbox" name="filter[]" value="<?php echo $filter['filter_id']; ?>" checked="checked" />
            <?php echo $filter['name']; ?>
            <?php } else { ?>
            <input type="checkbox" name="filter[]" value="<?php echo $filter['filter_id']; ?>" />
            <?php echo $filter['name']; ?>
            <?php } ?>
          </label>
        </div>
        <?php } ?>
      </div>
    </div>
    <?php } ?>
  </div>
  <div class="panel-footer text-right">
    <button type="button" id="button-filter" class="btn btn-primary"><?php echo $button_filter; ?></button>
  </div>
</div>
<script type="text/javascript"><!--
$('#button-filter').on('click', function() {
filter = [];
$('input[name^=\'filter\']:checked').each(function(element) {
filter.push(this.value);
});
location = '<?php echo $action; ?>&filter=' + filter.join(',');
});
//--></script>

Можно ли это реализовать, чтобы корректно работало?

 

[pantagruel964]

Можно.

[Sha]

ага, можно.

[afwollis]

"как на картинке" использовать для чекбоксов нелогично.

такой дизайн подразумевает выбор одного из двух вариантов, а это radio, а не checkbox.

[burunduchki]

"как на картинке" использовать для чекбоксов нелогично.

такой дизайн подразумевает выбор одного из двух вариантов, а это radio, а не checkbox.

 

Логика остается прежней, меняется лишь дизайн и убирается кнопка «Поиск». Такой дизайн более удобен, особенно для моб. устройств.

 

Единственная сложность — привязать действие кнопки «Поиск» на чекбоксы. Моих познаний php, к сожалению, недостаточно. Может кто-то реализовал подобное и подскажет? Будут признателен.