↑こんな見た目だけどラジオボタンとして動作します。
input要素のradioは、なんかすごく小さい丸いポッチを押すことで排他的に選択肢が切り替わるForm要素のコンポーネントである。
対応するlabel要素をつかうことで、そのlabel要素が押された時にも選択肢が切り替わるようになっている。
スマホだとちょっと使いにくい。
いっそ小さいポッチなど消してしまって、でかく表示したlabelを押すことで選んでいる選択肢が切り替わるようなUIが作りたい。
（div要素や複数のトグルボタンの組み合わせで実現するよりも、ふつうのForm要素のinputとして、jsでそのまま選択値をgetしたりsetしたりできると楽そうなので）
ラジオボタンは小さいポッチの見た目でどれが選ばれているのかわかるようになっているが、それを消してしまうので、
選択されているlabelだけ見た目が切り替わってもらう必要がある。
それをCSSで実現するには以下のようにする。
input[type="radio"] {
/* ラベルでのみ選択させる場合はnoneにする */
display:none;
/* firefoxなど一部ブラウザではサイズ指定が効かない仕様 */
width:23px;
height:23px;
}
/* ラジオボタンに対応するラベル */
input[type="radio"]+label {
display:inline;
font-size:22px;
border:1px solid black;
border-radius:10px;
padding:5px;
background:white;
color:black;
}
/* 選ばれているラジオボタンに対応するラベル */
input[type="radio"]:checked+label {
background:black;
color:white;
}
HTMLはこんなかんじ
<form id="big-radio">
<input id="radio-sushi" type="radio" name="meshi" value="寿司">
<label for="radio-sushi">寿司</label>
<input id="radio-pizza" type="radio" name="meshi" value="ピザ">
<label for="radio-pizza">ピザ</label>
<input id="radio-sake" type="radio" name="meshi" value="酒">
<label for="radio-sake">酒</label>
</form>
もうちょっとマトモにCSS書いたら複数選択肢から一つ選ぶUIが作りやすくなりそう。
オマケ
jQueryでどの選択肢が切り替わったらイベントをうけとるのは
$('input[name="meshi"]').change(function(){
var val = $(this).val();
alert(val);
})
でできる