如何通過單擊其 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>