1

美しい複数選択 HTML ページを作成したいと思います。<div>画像やテキストを含む3 つまたは 4 つの s が必要であり、ユーザーは<div>その上の任意の場所をクリックするだけで、それぞれの「オン」または「オフ」を切り替えることができる必要が<div>あります (アニメーションで可能であれば、ハイライト効果が必要です)。 . フォームが送信されると、チェックボックスであるかのように、各 の状態がサーバーに送信され<div>ます。

あちこち探しましたが、そのようなものは見つかりませんでした。あまりにも基本的なことのように思えるので、些細なことを見落としていたのかもしれません。何か案は？私はすでに jQuery とブートストラップを使用しているので、これらのフレームワークのみに基づく単純なソリューションがあれば、非常に嬉しく思います。

ありがとう。

編集:<div> s が移動したり消えたりしたくありません。<div>が選択されているときに背景色を青に変更し、選択されていないときに白に戻すなど、「ハイライト」効果が必要です。

4

2 に答える 2

5

優れた HTML ベースから始めることをお勧めします。おそらく、それぞれの内部に非表示のラジオボタンを使用し、クリックさdivれたときにチェックまたはチェックを外しdivます。ラジオ ボタンは、選択した値を送信するフォームの有効な項目になります。

HTML:

<div class="choice">
    <input id="choice_1" type="radio" name="choice" value="choice_1" />
    <label for="choice_1">Chicago</label>
</div>

<div class="choice">
    <input id="choice_2" type="radio" name="choice" value="choice_2" />
    <label for="choice_2">Los Angeles</label>
</div>


<div class="choice">    
    <input id="choice_3" type="radio" name="choice" value="choice_3" />
    <label for="choice_3">San Francisco</label>
</div>

JavaScript:

$(document).ready(function() {
    var choices = $('.choice');

    choices.on('click', function(event) {
        var choice = $(event.target);
        choice
            .find('[name="choice"]')
            .prop('checked', true)
            .trigger('change');
    });

    var inputs = $('.choice input');
    inputs.on('change', function(event) {
        var input = $(event.target);
        var choice = $(this).closest('.choice');

        $('.choice.active').removeClass('active');
        choice.addClass('active');
    });
});​

デモ: jsfiddle

代替手段: 一度に複数を選択したい場合

したがって、ラジオ ボタンでは、ラジオ ボタン グループ内で一度に 1 つのみがアクティブになります。それが必要な動作でない場合は、非表示のチェックボックスを使用してオンとオフを切り替えることができます。

HTML:

<div class="choice">
    <input id="choice_1" type="checkbox" name="choice_1" value="choice_1" />
    <label for="choice_1">Chicago</label>
</div>

<div class="choice">
    <input id="choice_2" type="checkbox" name="choice_2" value="choice_2" />
    <label for="choice_2">Los Angeles</label>
</div>


<div class="choice">    
    <input id="choice_3" type="checkbox" name="choice_3" value="choice_3" />
    <label for="choice_3">San Francisco</label>
</div>

JavaScript:

$(document).ready(function() {
    var choices = $('.choice');

    choices.on('click', function(event) {
        var choice = $(event.target);
        var input = choice.find('[type="checkbox"]');
        input
            .prop('checked', !input.is(':checked'))
            .trigger('change');
    });

    var inputs = $('.choice input');
    inputs.on('change', function(event) {
        var input = $(event.target);
        var choice = $(this).closest('.choice');

        if (input.is(':checked')) {
            choice.addClass('active');
        }
        else {
            choice.removeClass('active');
        }
    });
});​

デモ: jsfiddle

于 2012-12-07T22:46:07.350 に答える
1

jQuery のクリック関数を使用して、いくつかの方法でこれを行うことができます。

// Toggle a class for the div
// - For this you would setup your styles in the CSS for your site 
$('div').click(function(){
    $(this).toggleClass('highlight');
});

// Animate the background-color for the div
// - For this you would need to include the jquery.color plugin
// - https://github.com/jquery/jquery-color
$('div').toggle(function(){
    $(this).animate({backgroundColor: "#aa0000"}, 500);
}, function(){
    $(this).animate({backgroundColor: "#ffffff"}, 500);
});

jsFiddle の例を次に示します: http://jsfiddle.net/PC5ry/

于 2012-12-07T22:33:26.083 に答える