0

私の Angular アプリには、次のメニューがあります。

ここに画像の説明を入力

ご覧のとおり、項目 (a要素) と、それぞれにチェックボックスとラベルがあります。

<span class="caption">RAM</span>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>4 GB</label>
    </div>
</a>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>8 GB</label>
    </div>
</a>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>16 GB</label>
    </div>
</a>

(click)イベントキャプチャを正しく処理するには、すべてのアイテムにどのように追加すればよいですか?ユーザーがラベルまたはアイテム全体をクリックすると、関連するチェックボックスが選択されますか?

...または、私が言いたいことを達成するためのより良い方法を知っていますか?

4

5 に答える 5

2

ラベルをクリックするとチェックボックスが切り替わるようにするには、ラベル内に input 要素を含めます ( MDNで説明されているように):

<a class="sub-item item">
  <div class="item-checkbox">
    <label><input type="checkbox" tabindex="0" class="hidden">4 GB</label>
  </div>
</a>

ラベルでアンカー要素も塗りつぶしたい場合は、以下に示すように CSS を定義します。このスタイルを適用すると、アンカーをクリックするとチェックボックスが切り替わります。

.ui.secondary.menu a.item {
  padding: 0px;
}

div.item-checkbox {
  width: 100%;
  height: 100%;
}

div.item-checkbox > label {
  display: block;
  padding: .78571429em .92857143em;
}

div.item-checkbox > label > input {
  margin-right: 0.25rem;
}

デモについては、このスタックブリッツを参照してください。

于 2020-01-16T17:49:18.253 に答える