单击标签时不检查语义 UI 单选按钮答案

【问题标题】：Semantic UI Radio Buttons do not check when clicking the label单击标签时不检查语义 UI 单选按钮
【发布时间】：2016-01-10 04:41:03
【问题描述】：

正如标题所说，当标签（tex）被点击时，单选按钮不检查。然而，这似乎在 Semantic 的网站上运行良好。

带有工作单选按钮的语义 UI 文档：http://semantic-ui.com/modules/checkbox.html

以下示例代码直接来自上述语义 UI 文档：

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" checked="checked">
        <label>Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>Twice a day</label>
      </div>
    </div>
  </div>
</div>

我该如何解决这个问题？

编辑：显然我需要一些用于单选按钮的 javascript，如下所述：http://semantic-ui.com/modules/checkbox.html#/usage。不过，我无法找到工作单选按钮/复选框所需的最低代码。

【问题讨论】：

标签： jquery html css semantic-ui

【解决方案1】：

我的 Javascript 中需要 $('.ui.checkbox').checkbox();。

【讨论】：

我快疯了。似乎语义 UI 中的很多东西都需要显式的 JavaScript 调用。
这也适用于我，这令人沮丧，因为文档明确指出，“复选框不需要 Javascript 才能运行。” semantic-ui.com/modules/checkbox.html#/usage
请注意，您不能将<input> 放在<label> 中。它必须是 <input/><label/> 而不是 <label><input/></label> 才能使复选框/无线电输入完全起作用（即使使用 JS 调用）。（我知道这不是原始问题中的问题，但正是我的问题导致我得到了这个答案）
另请参阅下面的答案以了解无 JS 解决方案

【解决方案2】：

如果你想检查radio buttons点击标签，你必须使用id作为input字段和for作为label：

<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" checked="checked" id="100">
        <label for="100">Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="101">
        <label for="101">2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="102">
        <label for="102">Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="103">
        <label for="103">Twice a day</label>
      </div>
    </div>
  </div>
</div>

jsfiddle-link

当然，您可以使用自己的 id 和 for 名称，但所有值都必须是唯一的！

【讨论】：

【解决方案3】：

似乎应用于“label”标签的样式会导致问题。您可以删除类 'ui radio checkbox' 并将 input 标签移动到 label 标签内并尝试，它可以按需要工作。如果您想要此功能，请尝试使用您的自定义类覆盖此类。

【讨论】：

【解决方案4】：

如果标签正确“链接”到它们应该切换/检查的元素，则在 JS 中没有必要：

  <div class="ui radio checkbox">
    <input type="radio" name="example2" checked="checked" id="radio1">
    <label for="radio1">Once a week</label>
  </div>

这是如何做到的：

分配“id”属性
在标签定义中使用“for”属性，指向步骤 1 中的 id

【讨论】：

【解决方案5】：

这个答案有点晚了，但我以最简单的方式修复了它。

将 value="true" 添加到您的输入复选框，如下所示：

只有被检查的值才会被提交到服务器。

【讨论】：

这不能回答问题。 Douglas Gaskell 已经提供了一个很好的答案。