Button Group 使用 JQuery 更改功能答案

【问题标题】：Button Group use JQuery change functionButton Group 使用 JQuery 更改功能
【发布时间】：2015-11-01 08:51:58
【问题描述】：

我有一个带有 on.click 功能的按钮组，它正在工作。但不是 on.change。

            <div class="ui buttons">
                <button class="ui button">Value 1</button>
                <button class="ui button">Value 2</button>
                <button class="ui button">Value 3</button>
            </div>

这是我的功能

$('.ui.button').on('click change', function(){
    alert(...)
});

当我在不点击的情况下使用它时，它不起作用。

【问题讨论】：

如何触发onchange事件？
按钮没有 onchange 事件！

标签： javascript jquery buttongroup

【解决方案1】：

正如 cmets 中所指出的，按钮没有 onchange 事件，但如果您想同时使用 onclick 和 onchange 事件，我可以建议使用radio 按钮吗？

【讨论】：

好的.. 是的，我已将其更改为收音机。我用 buttonset 试了一下，因为它看起来更好看。我正在使用语义用户界面
@WolfgangMüller 您可以设置单选按钮的样式，使其看起来像一个按钮，请参阅我的回答。

【解决方案2】：

您可以设置单选按钮的样式，使其看起来像普通按钮。

见POST

body { font: 400 16px/1.45 "Palatino Linotype"; }
.buttons {
  margin: 4px;
  float: left;
  border-radius: 12px;
  font-variant: small-caps;
}
.buttons .button {
  float: left;
  width: 70px;
  margin: 4px;
  background-color: #111;
  border-radius: 6px;
  border: 1px solid #0FF;
  overflow: auto;
}
.buttons .button span {
  text-align: center;
  font-size: 16px;
  padding: 4px 0px;
  display: block;
}
.buttons .button .check {
  position: absolute;
  top: -20px;
}
.buttons .check:checked + span {
  background-color: #0FF;
  color: #111;
  border: 1px solid #0FF;
}
.buttons .button {
  background-color: #111;
  color: #0FF;
}

<fieldset class="ui buttons">
  <label class="ui button">
    <input type="radio" class="check" name="toggle"><span>Value 1</span>
  </label>
  <label class="ui button">
    <input type="radio" class="check" name="toggle"><span>Value 2</span>
  </label>
  <label class="ui button">
    <input type="radio" class="check" name="toggle"><span>Value 3</span>
  </label>
</fieldset>

【讨论】：