jquery - 如果可能的话，如何使用 jquery 和/或 bootstrap 制作可切换的 div 以进行多种选择？

Question

我想制作一个漂亮的多项选择 HTML 页面。我想要 3 或 4 <div>包括图像和/或文本，用户应该能够切换每个 <div>只需单击 <div> 上的任意位置即可“打开”或“关闭” (如果可能的话，应该有突出显示的效果)。提交表单时，应向服务器发送每个 <div> 的状态，就好像它是一个复选框。

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

谢谢。

编辑:我不想要 <div> s 移动或消失。我只是想要一个“突出显示”的效果，比如当<div>时将背景颜色更改为蓝色被选中时，取消选中时返回白色。

Answer 1

我建议从良好的 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

替代方案:如果您想一次选择多个

因此，对于单选按钮，单选按钮组中一次只有一个处于事件状态。如果这不是您想要的行为，您可以使用隐藏的复选框并打开和关闭它。

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