HTMLの代わりにクールなチェックボックス

Question

okだけでなくラジオボタンもOKです。物事は、私のフォームに&ラジオボタンがたくさんあるチェックボックスがある&それは地獄として醜いように見えます。

これは機能上の問題ではなく、純粋なUIの問題です。私は、同じタスクを実装するためのよりクールな方法を探しています。

ああ、私はjQueryの1.4.3

UPDATEを使用しています：私は同じのために、このjQuery Pluginを得ました。それは素晴らしいです！！ありがとうございました...私が今使っているスクリーンショットを添付しました。私が好きだったのは、iPhoneスタイルのように見えますが、正確なクローンではないからです。

Answer 1

多くのチェックボックス/ラジオボタンを置き換えるドロップダウンメニューはありませんか？複数の選択を有効にして、チェックボックスの動作を繰り返すことができます。一般的には、同じ科目に複数のチェックボックスがある場合は、私がやることです。

あなたは彼らが別々のものであることを意味しますか？その場合、ユーザーからどのような情報を取得しようとしているのか、いくつかのアイデアを投稿できますか？

Answer 2

あなたは常にすることができ、再スキン（単にボタンなどの他のフォーム要素のような）CSSを使用してチェックボックス/ラジオボタン。

Answer 3

これは、編集フィールドの境界線を変更するよりも少し高度な作業です。最も良い方法は、チェックボックス/ラジオボタンを隠し、それをダミー要素で置き換えることです。この方法の問題は、両方の要素を同期させておくことです。ラジオボタン画像は、いつ別のラジオボタンがチェックされたかなどを知る必要があります。これには、高度なイベントピンポンが必要です。チェックボックス（テストされていない）でこれを行うことができます：

$(':checkbox').each(function() { 
    var checkbox = $(this), 
     fakebox = $(document.createElement('span')).addClass('custom-checkbox'); 

    // toggle and trigger update of the real checkbox 
    fakebox.click(function() { 
     checkbox.attr('checked', !checkbox.attr('checked')).change(); 
    }); 

    // changes to the real checkbox causes the fake checkbox to update its status 
    checkbox.change(function() { 
     if (checkbox.attr('checked')) { 
     fakebox.addClass('custom-checkbox-checked'); 
     } else { 
     fakebox.removeClass('custom-checkbox-checked'); 
     } 
    }); 

    // initialize 
    checkbox.change().hide(); 
    fakebox.insertAfter(checkbox); 
});