复选框标签中的一个标签答案

【问题标题】：a-tag within checkbox-label复选框标签中的一个标签
【发布时间】：2016-12-04 16:26:57
【问题描述】：

我的标签中有一个链接，其中包含复选框输入元素的 for 属性：

<li>
    <label for="tab2-btn">
        <a class="menu_link" href="#the-tab-bar">Payment</a>
    </label>
</li>

[...]

<div class="tabBar" id="the-tab-bar">
   <input type="radio" name="tab" id="tab2-btn">
[...]
</div>

a-Tag 按预期链接到特定的 dom 元素（跳转到 id 为“the-tab-bar”的 div），但标签不起作用，这意味着 id 为“tab2-btn”的复选框获胜'不被检查。

【问题讨论】：

链接获得点击而不是标签。 javascript是一种选择吗？
是的，确实如此。不幸的是，不应使用 javascript（ebay 模板）

标签： html css checkbox

【解决方案1】：

如果您不能（或由于某种原因不想）使用 JavaScript/jQuery，您可以使用伪选择器 :target 并使用属性 checked 预先检查单选按钮（以及不同的name 每个）。这是假设您只希望一次出现一个单选按钮。如果这是一个表单，那么我不会推荐这条路线并推荐 JavaScript/jQuery。

片段

#tab1-btn:target,
#tab2-btn:target,
#tab3-btn:target {
  display: block
}
.tabBar label {
  display: none;
}

<ul>
  <li>
    <label for="tab1-btn">
      <a class="menu_link" href="#tab1-btn">Payment 1</a>
    </label>
  </li>
  <li>
    <label for="tab2-btn">
      <a class="menu_link" href="#tab2-btn">Payment 2</a>
    </label>
  </li>
  <li>
    <label for="tab3-btn">
      <a class="menu_link" href="#tab3-btn">Payment 3</a>
    </label>
  </li>
</ul>

<div class="tabBar" id="the-tab-bar">
  <label for="tab1-btn" id="tab1-btn">
    <input type="radio" name="tab1" checked>Payment 1</label>
  <label for="tab2-btn" id="tab2-btn">
    <input type="radio" name="tab2" checked>Payment 2</label>
  <label for="tab3-btn" id="tab3-btn">
    <input type="radio" name="tab3" checked>Payment 3</label>
</div>

【讨论】：