如何通过单击 div 来 select 单选按钮？

Question

我创建了 5 类单选按钮，每类有 3 个选项可供选择。我已将这些单选按钮插入到其各自的 div 中。在构建单选按钮时，我相信当用户点击 div 本身时，单选按钮也会被 select 编辑。我发现事实并非如此。起初我设置 input [type=radio] opacity 0 所以圆框是隐藏的，不想让它显示。我删除了这个 css 属性以查看它是否被 selected 但它没有。有没有办法在不点击圆圈的情况下 select 单选按钮，然后点击它所在的 div？我想也许我的 HTMl 不正确，不知道该去哪里。非常感谢任何提示。我将posthtml一类单选按钮和单选按钮的当前显示。

<main class="subscription__container">
      <section
        id="preferences"
        class="subscription__container--preferences box"
      >
        <div class="question__container">
          <h3 class="question__container--title">
            How do you drink your coffee?
          </h3>
          <img
            class="question__container--img"
            src="../assets/plan/desktop/icon-arrow.svg"
            alt="arrow"
          />
        </div>
        <div class="options__container">
          <div class="options__container--option">
            <input
              id="capsule"
              type="radio"
              data-preference="Capsule"
              value="Capsule"
              name="preferences"
              checked
            />
            <label for="capsule"></label>
            <h4 class="options__container--title">Capsule</h4>
            <p class="options__container--description">
              Compatible with Nespresso systems and similar brewers.
            </p>
          </div>
          <div class="options__container--option">
            <input
              id="filter"
              type="radio"
              data-preference="Filter"
              value="Filter"
              name="preferences"
            />
            <label for="filter"></label>
            <h4 class="options__container--title">Filter</h4>
            <p class="options__container--description">
              For pour over or drip methods like Aeropress, Chemex, and V60.
            </p>
          </div>
          <div class="options__container--option">
            <input
              id="espresso"
              type="radio"
              data-preference="Espresso"
              value="Espresso"
              name="preferences"
            />
            <label for="espresso"></label>
            <h4 class="options__container--title">Espresso</h4>
            <p class="options__container--description">
              Dense and finely ground beans for an intense, flavorful
              experience.
            </p>
          </div>
        </div>
      </section>
</main>

Answer 1

您的标签没有围绕 div 内容。它们目前只是空标签（例如，<label for="capsule"></label>），所以显然什么都没有发生。

这应该有效：

<main class="subscription__container">
      <section
        id="preferences"
        class="subscription__container--preferences box"
      >
        <div class="question__container">
          <h3 class="question__container--title">
            How do you drink your coffee?
          </h3>
          <img
            class="question__container--img"
            src="../assets/plan/desktop/icon-arrow.svg"
            alt="arrow"
          />
        </div>
        <div class="options__container">
          <div class="options__container--option">
            <input
              id="capsule"
              type="radio"
              data-preference="Capsule"
              value="Capsule"
              name="preferences"
              checked
            />
            <label for="capsule">
            <h4 class="options__container--title">Capsule</h4>
            <p class="options__container--description">
              Compatible with Nespresso systems and similar brewers.
            </p></label>
          </div>
          <div class="options__container--option">
            <input
              id="filter"
              type="radio"
              data-preference="Filter"
              value="Filter"
              name="preferences"
            />
            <label for="filter">
            <h4 class="options__container--title">Filter</h4>
            <p class="options__container--description">
              For pour over or drip methods like Aeropress, Chemex, and V60.
            </p></label>
          </div>
          <div class="options__container--option">
            <input
              id="espresso"
              type="radio"
              data-preference="Espresso"
              value="Espresso"
              name="preferences"
            />
            <label for="espresso">
            <h4 class="options__container--title">Espresso</h4>
            <p class="options__container--description">
              Dense and finely ground beans for an intense, flavorful
              experience.
            </p></label>
          </div>
        </div>
      </section>
</main>

Answer 2

将输入收音机放在标签内：

<label class="options__container--option" for="espresso">
    <input id="espresso"
           type="radio"
           data-preference="Espresso"
           value="Espresso"
           name="preferences"/>
        <div>
            <h4 class="options__container--title">Espresso</h4>
            <p class="options__container--description">
              Dense and finely ground beans for an intense, flavorful
              experience.
            </p>
        </div>
</label>

如何通过单击 div 来 select 单选按钮？

How to select radio button by clicking its div?

html

javascript

radio-button