How to send a request to the address bar when selecting a checkbox?

Question

JavaScript

I want to make a nice view for the filter elements - a drop-down list of divs with checkboxes...
When a checkbox is selected, filtering occurs, but the checkedbox is reset and filtering is not possible for several checkboxes.
View:

<?php
$this->registerJs(
    '$("document").ready(function(){
        $(document).on("change", ".status_chk", function(e) {
        e.preventDefault();
            $("#filter-form").submit();
        });
    });'
);
?>

<div class="shop-new col-md-12 animated bounceInLeft">

<h1>
    New
</h1>

    <div class="col-md-12 filters-menu-section">



    </div>

<?php Pjax::begin([
    'id' => 'productList',
    'enablePushState' => false,
    'enableReplaceState' => false,
]); ?>

    <?php $form = ActiveForm::begin([
        'id' => 'filter-form',
        'action' => ['new'],
        'method' => 'get',
        'options' => ['data-pjax' => true],
    ]); ?>

    <div  class="filter">

        <div class="filter-prompt">
            <p>
                Category
            </p>
        </div>

        <div class="filter-options">
            <?php foreach ($categories as $category): ?>
            <div class="filter-options_item">
                <label for="category_<?= $category['id'] ?>" class="status_chk">
                    <input id="category_<?= $category['id'] ?>" type="checkbox" name="ProductSearch[category_id][]" value="<?= $category['id'] ?>"> <span class="label-text"><?= $category['title'] ?></span>
                </label>
            </div>
            <?php endforeach; ?>
        </div>

    </div>

    <?php ActiveForm::end();?>

<?= $this->render('_loop', ['dataProvider' => $dataProvider, 'searchModel' => $searchModel]); ?>

<?php Pjax::end(); ?>

</div>

How to win this and why does the checkbox lose its state?
For a multi-select, a link of the type

?ProductSearch[category_id]=3&ProductSearch[category_id]=6

Answer 1

in your Pjax, the form is reloaded as a whole, i.e. html is taken from the site and replaced, but in the new one they are not marked. You can roughly do something like this:

<?php foreach ($categories as $category): ?>
            <div class="filter-options_item">
                <label for="category_<?= $category['id'] ?>" class="status_chk">
                    <input id="category_<?= $category['id'] ?>" type="checkbox" name="ProductSearch[category_id][<?= $category['id'] ?>]" value="<?= $category['id'] ?>" <?=isset(Yii::$app->request->post('ProductSearch'),Yii::$app->request->post('ProductSearch')['category_id'][$category['id']]) ? " checked='checked'" : "" ?> > <span class="label-text"><?= $category['title'] ?></span>
                </label>
            </div>
            <?php endforeach; ?>

those. check if the selected category is in the post and check it.
or you can move
<?php Pjax::begin([
'id' => 'productList',
'enablePushState' => false,
'enableReplaceState' => false,
]); ?>
for the form so that the form is not included in it