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

Question

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

<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 内：

<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>