空格键切换无线电输入

Question

我有一个单选按钮列表，出于可访问性的目的，我试图确保按空格键可以切换单选按钮的状态。但是，当我按空格键时它不会切换。任何帮助都感激不尽。我的 HTML 代码结构有问题吗？这是我的代码：

<ul class="filter-group__list filter-group__list--sort" tabindex="0"><li class="filter-item">
                  <label data-sort="" for="filter-featured" class="filter-item__content" tabindex="0">
                    <input tabindex="0" type="radio" name="sort_by" data-sort-item-input="" checked="" value="Featured" data-value-escaped="Featured" id="filter-featured" class="filter-item__radio">

                    <div class="filter-item__content-inner">
                      <span class="filter-item__label">Featured</span>
                    </div>
                  </label>
                </li><li class="filter-item">
                  <label data-sort="" for="filter-best-selling" class="filter-item__content" tabindex="0">
                    <input tabindex="0" type="radio" name="sort_by" data-sort-item-input="" value="Best selling" data-value-escaped="Best%20selling" id="filter-best-selling" class="filter-item__radio">

                    <div class="filter-item__content-inner">
                      <span class="filter-item__label">Best selling</span>
                    </div>
                  </label>
                </li><li class="filter-item">
                  <label data-sort="" for="filter-alphabetically-a-z" class="filter-item__content" tabindex="0">
                    <input tabindex="0" type="radio" name="sort_by" data-sort-item-input="" value="Alphabetically, A-Z" data-value-escaped="Alphabetically,%20A-Z" id="filter-alphabetically-a-z" class="filter-item__radio">

                    <div class="filter-item__content-inner">
                      <span class="filter-item__label">Alphabetically, A-Z</span>
                    </div>
                  </label>
                </li><li class="filter-item">
                  <label data-sort="" for="filter-alphabetically-z-a" class="filter-item__content" tabindex="0">
                    <input tabindex="0" type="radio" name="sort_by" data-sort-item-input="" value="Alphabetically, Z-A" data-value-escaped="Alphabetically,%20Z-A" id="filter-alphabetically-z-a" class="filter-item__radio">

                    <div class="filter-item__content-inner">
                      <span class="filter-item__label">Alphabetically, Z-A</span>
                    </div>
                  </label>
                </li></ul>

Answer 1

这是单选控件的标准行为，您可能需要将其更改为复选框以实现您想要的行为。

否则，您必须编写一些Javascript才能获得您所描述的内容。

<ul class="filter-group__list filter-group__list--sort" tabindex="0"><li class="filter-item">
                  <label data-sort="" for="filter-featured" class="filter-item__content" tabindex="0">
                    <input tabindex="0" type="checkbox" name="sort_by" data-sort-item-input="" checked="" value="Featured" data-value-escaped="Featured" id="filter-featured" class="filter-item__radio">

                    <div class="filter-item__content-inner">
                      <span class="filter-item__label">Featured</span>
                    </div>
                  </label>
                </li><li class="filter-item">
                  <label data-sort="" for="filter-best-selling" class="filter-item__content" tabindex="0">
                    <input tabindex="0" type="checkbox" name="sort_by" data-sort-item-input="" value="Best selling" data-value-escaped="Best%20selling" id="filter-best-selling" class="filter-item__radio">

                    <div class="filter-item__content-inner">
                      <span class="filter-item__label">Best selling</span>
                    </div>
                  </label>
                </li><li class="filter-item">
                  <label data-sort="" for="filter-alphabetically-a-z" class="filter-item__content" tabindex="0">
                    <input tabindex="0" type="checkbox" name="sort_by" data-sort-item-input="" value="Alphabetically, A-Z" data-value-escaped="Alphabetically,%20A-Z" id="filter-alphabetically-a-z" class="filter-item__radio">

                    <div class="filter-item__content-inner">
                      <span class="filter-item__label">Alphabetically, A-Z</span>
                    </div>
                  </label>
                </li><li class="filter-item">
                  <label data-sort="" for="filter-alphabetically-z-a" class="filter-item__content" tabindex="0">
                    <input tabindex="0" type="checkbox" name="sort_by" data-sort-item-input="" value="Alphabetically, Z-A" data-value-escaped="Alphabetically,%20Z-A" id="filter-alphabetically-z-a" class="filter-item__radio">

                    <div class="filter-item__content-inner">
                      <span class="filter-item__label">Alphabetically, Z-A</span>
                    </div>
                  </label>
                </li></ul>