PHP / WP如何在刷新后保存复选框状态？

Question

我有一个过滤器，它是使用 foreach 循环的国家/地区列表，我希望能够在刷新页面时保存复选框的状态。因此，例如，如果选中日本，则在我刷新页面时它应该保持选中状态。我应该怎么做，我看过一些关于使用 localstorage 的帖子，但它是否适用于我没有“id”的代码？是否可以通过“name="filter_country[]" 来实现？我还有一个使用“Radio”的过滤器我不确定它是否适用于收音机和复选框。

<ul class="filter-country">
        <?php foreach($countries as $country):?>
        <li class="filter-child filter-item">
        <div class="checkbox">
          <label>
            <input type="checkbox" class="dir-filters filter-checkbox" name="filter_country[]" value="<?php echo $country;?>">
            <?php echo $country;?>
          </label>
        </div>
        </li>
        <?php endforeach;?>

Answer 1

应该可以的

// get all checkboxes
const countries = document.querySelectorAll('.filter-checkbox');

// when checked set its value to localstorage
countries.forEach(country => {
    country.addEventListener('change', () => {
        localStorage.setItem('checkedCountry', country.value);
    });
});

// checking for localstorage. If checkbox value is the same as value in localstorage we set it's attribute checked to be true
countries.forEach(country => {
    const checkedCountry = localStorage.getItem('checkedCountry');
    if(checkedCountry && checkedCountry === country.value ) {
        country.checked = true;
    }
});

请注意，复选框允许选中任意数量的国家，但在此示例中，我们仅在本地存储中存储一个值。因此，重新加载后只会检查最后检查的国家/地区。如果不是你要找的请告知