1

我想做一个漂亮的多选 HTML 页面。我想要 3 或 4<div>秒，包括图像和/或文本，用户应该能够<div>通过简单地单击任意位置来切换每个“打开”或“关闭” <div>（如果可能的话，应该有一个突出显示的效果动画） . 当表单被提交时，应该向服务器发送 each 的状态<div>，就好像它是一个复选框。

我到处搜索，但找不到类似的东西。它看起来很基本，以至于我可能忽略了一些微不足道的事情。有任何想法吗？我已经在使用 jQuery 和 bootstrap，所以如果有一个仅基于这些框架的简单解决方案，我会非常高兴。

谢谢。

编辑：我不希望<div>s 移动或消失。我只想要一个“突出显示”的效果，例如在选中时将背景颜色更改为蓝色，在<div>未选中时更改为白色。

4

2 回答 2

5

I would recommend starting with a good HTML base. I would probably use a hidden radio button inside each div and check or uncheck it when the div was clicked. The radio button would be a valid item on the form which would submit the selected value.

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');
    });
});​

Demo: jsfiddle

Alternative: if you want multiple selected at once

So with radio buttons only one within the radio button group is active at a time. If that is not the behavior you want, you could use a hidden checkbox and toggle it on and off.

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');
        }
    });
});​

Demo: jsfiddle

于 2012-12-07T22:46:07.350 回答
1

您可以使用 jQuery click 函数通过几种方式执行此操作：

// 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 回答