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

Question

正如标题所说，单击标签 (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。不过，我无法找到工作收音机所需的最低代码 button/checkbox。

Answer 1

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

Answer 2

如果你想检查radio buttons点击标签，你必须对input字段使用id，对label字段使用for:

<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 名称，但所有值必须是唯一的！

Answer 3

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

覆盖此 class

Answer 4

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

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

该值只有在选中后才会提交给服务器。

Answer 5

如果标签正确地“链接”到它们应该 toggle/check:

的元素，那么在 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

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

Semantic UI Radio Buttons do not check when clicking the label

html

css

jquery

semantic-ui