ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。
下記のようなボタンの状態をtoggleボタンというようですね。
jQueryでもできるようですが、bootstrapを使うのが一番楽でしょう。
特にプラグインも入れる必要なく、下記のコードを書けばすぐに実装できます。
|
1 2 3 4 5 6 |
<div class="alignment" data-toggle="buttons-radio"> <input type="hidden" name="sample" value="" /> <button type="button" class="btn btn-info" value="1">十分</button> <button type="button" class="btn btn-info" value="2">在庫少</button> <button type="button" class="btn btn-info" value="3">発注中</button> </div> |
なお、上記の実装は正確にはradioを使っているわけではないので値を入れたい場合はJavaScriptで値をhiddenに入れて、それをPOSTで投げる必要があります。
参考リンク
