jQueryUI：ラジオボタンをボタンセットにする

サンプルはこちら

See the Pen lBpku by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTML

<div class="group">
  <input id="radio1" type="radio" name="r" /><label for="radio1">Radio1</label>
  <input id="radio2" type="radio" name="r" /><label for="radio2">Radio2</label>
  <input id="radio3" type="radio" name="r" /><label for="radio3">Radio3</label>
</div>

ラジオボタンとそれに対応するラベルを配置するのがお約束です。

JavaScript

$(function() {
  $('.group').buttonset();
});

「.group」に対して「buttonset()」コンポーネントを適用するのみです。