3

Yoothemes UIKit ( http://getuikit.com ) 提供了一种使按钮组看起来像单选按钮一样起作用的方法。看到这个页面的一半：http: //getuikit.com/docs/button.html

但是文档完全缺少关于如何使按钮组真正像表单中的单选按钮一样起作用的文档。感谢您对此的建议。

目前，如果我在表单中使用它们，任何单击的按钮都会提交表单。iphone 订购选项的示例表格：

   <form>
      <div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
        <button class="uk-button uk-button-large">16gb</button>
        <button class="uk-button uk-button-large">32gb</button>
        <button class="uk-button uk-button-large">64gb</button>
      </div>
      <div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
        <button class="uk-button uk-button-large">Space Gray</button>
        <button class="uk-button uk-button-large">Gold</button>
        <button class="uk-button uk-button-large">Silver</button>
      </div>
      <button type="submit" class="uk-button uk-button-large uk-button-primary"><i class="uk-icon-magnifier"></i> Review and Order</button>
    </form>
4

1 回答 1

6

这对我有用：

<div class="uk-button-group" data-uk-button-radio>
    <label class="uk-button">
        <input type="radio" name="gender" value="0" style="display:none;"/>
        Male
    </label>
    <label class="uk-button">
        <input type="radio" name="gender" value="1" style="display:none;"/>
        Female
    </label>
</div>

或者，您也可以执行以下操作：

<div class="uk-button-group" data-uk-button-radio>
    <label class="uk-button" for="male">Male</label>
    <label class="uk-button" for="female">Female</label>
    <input type="radio" id="male" name="gender" value="0" style="display:none;"/>
    <input type="radio" id="female" name="gender" value="1" style="display:none;"/>
</div>

希望能帮助到你。

于 2014-06-06T09:30:43.170 回答