3

私の Web アプリ (c#/MVC3) では、テーブルに大量のチェックボックスがあります。チェックボックスのテーブルではなく、トグル ボタンの壁のようにしたいと考えています。ユーザーにとっては、ボタンの壁のように見せたいのですが、クリックすると「チェック」され、ボタンの色が変わります。

チェックボックスにこれを実行させるCSSがあるかどうか（ボタンのように見え、チェックマークを表示するのではなくチェックで色を変更する）、またはボタンとjavascript/jqueryとの組み合わせを使用する必要があるかどうかはわかりませんでした。非表示のチェックボックスなど。

4

4 に答える 4

2

jQuery UI Button ウィジェットはそれを処理できます。

http://jqueryui.com/button/#checkbox

于 2012-12-07T21:57:52.830 に答える
1

はい、純粋な CSS でやりたいことを実行することは間違いなく可能です。

この質問で言及されている jsFiddle を確認する必要があると思います。

于 2012-12-07T22:31:38.537 に答える
0

ラジオ ボタンはオペレーティング システムによって生成され、簡単にスタイルを設定することはできません。

何か違うものが必要な場合は、CSS/画像と JavaScript を使用して生成する必要があります。

于 2012-12-07T21:58:17.067 に答える
0

まず第一に、私は実際にはユーザビリティの問題からこれを行うことを避けたいと思いますが、それでも読みたい場合は読み進めてください。

これを達成するのは実際には非常に難しいですが、可能です。私のソリューションでは、個々の ID をチェックボックスに割り当てる必要がありません。

基本的に、トグル クラスを使用して、CSS の background-position プロパティで配置する「オン」および「オフ」状態のイメージ スプライトが必要です。次に、次の jQuery を使用すると、画像の状態を交換できるだけでなく、フォームを使用するためにそれぞれのチェックボックスがオンまたはオフになっていることを確認できます。「実際の」チェックボックスは非表示になっていますが、機能は残っていることに注意してください。

<form>
    <input type="checkbox" class="custom" />
</form>

<style type="text/css">
.checkbox {
    clear:left;
    float:left;
    background:url('your_image');
    background-position:top;
    width:20px;
    height:20px;
    display:block;
}
.toggled {
    background-position:bottom !important;
}
</style>

$(document).ready(function () {
    var checkboxes = $('form .custom'),
        custom = $('<span></span>').addClass('checkbox');
    checkboxes.before(custom);
    checkboxes.css('visibility', 'hidden');
    $('.checkbox').click(function () {
        $(this).toggleClass('toggled');
        var isChecked = $(this).next(':checkbox');
        var value = isChecked.prop('checked') ? 'true' : 'false';
        if (value == 'false') {
            isChecked.prop('checked', true);
        } else {
            isChecked.prop('checked', false);
        }
    });
});

もちろん、正確なニーズに合わせて CSS を編集する必要があります。このタスクは一見簡単ではなかったので、これが役立つことを願っています。

于 2012-12-08T00:01:10.130 に答える