speckyboyの記事が参考になった
のでメモ書き。ラジオボタンを
jQueryで以前のDiggっぽくする
という内容です。CSSによるスタ
イルも楽に出来るのは魅力ですね。
旧Digg・・・と言ってもピンと来ないかもですけど、ラジオボタンを少し凝ったものにしよう、というもの。※あくまでTipsとしてご覧下さい。
Classic Digg-Style Radio Buttons
こんな感じのラジオボタンです・・・実際に表示されているのはラジオボタンでは無いのですが、それは後述します。
まず、動作サンプル
Sample
表示されているボタンはa要素です。a要素とラジオボタンをjQueryで連動させてcheckedにします。
コードです。
コード
$("a").on("click", function(e){ e.preventDefault(); if($(this).hasClass("sel")) { } else { $("a.sel").removeClass("sel"); $(this).addClass("sel"); var rid = $(this).attr('id'); var value = '[value="'+rid+'"]'; $('input:radio[name="category"]').filter(value).attr('checked', true); }}); |
ラジオボタンそのものはCSSでdisplay:none;になっています。表示されているa要素をクリックすると、そのa要素のidに合うvalueを持つinput要素がcheckedになる、という仕組みです。
↑ display:none;を外したサンプルになります。
↑ Chromeのデベロッパーツールでdisplay:none;されたinput要素のcheckedが確認出来ます。
このまま使う前にもう少し検証しないとですけど、方法が参考になったので備忘録として書きました。詳しい内容は以下でご確認下さい。
