jquery - 为用户选择某些复选框的按钮

Question

我有一个汽车制造商的清单……总共大约 70 个。我想在顶部有一组按钮，当用户单击它们时，会自动检查为它们制造的预定汽车。因此，例如，当用户选择“进口”按钮时，讴歌、本田、现代、起亚、马自达、三菱、日产、Scion、斯巴鲁、铃木、丰田和大众的复选框会被自动选中。

有人可以在这里指出我正确的方向吗？

Answer 1

为每个组创建一个单独的 CSS 类并将这些类分配给适当的元素。

然后当按下相应的按钮时，在复选框上设置选中的属性。

假设每个按钮都将类type-buttons和 ID 属性设置为所需的type，即id="imports".

$('.type-buttons').click(function(){
    var type = $(this).attr('id');
    $('input:checkbox.' + type).attr('checked','checked'); 
});

Answer 2

将一个类添加到您想要选择的复选框中，然后在用户单击按钮时使用该类来检查它们。就像是：

$('.defaultOnAcura').attr('checked', 'true');

Answer 3

享受：http: //jsfiddle.net/v9p5C/

Toggler 按钮有一个data-filter属性，它指定要切换的内容：

<input type="button" data-filter='us' value="USA"><br>
<input type="button" data-filter='jp' value="Japanese"><br>
<input type="button" data-filter='de' value="German"><br>
<input type="button" data-filter='import' value="Import"><br>

复选框有一个data-tags属性，它是一个 JSON 标签数组：

<input type="checkbox" data-tags='["us"]'>Cadillac<br>
<input type="checkbox" data-tags='["jp","import"]'>Mazda<br>
<input type="checkbox" data-tags='["de","import"]'>VW<br>
<input type="checkbox" data-tags='["hu","import"]'>Rába<br>

最后是一些 jQuery 让它工作：

$(document).on('click','input[type="button"]',function(e){

    var filter = $(this).data('filter');

    $('input[type="checkbox"]').each(function(){
        var $checkbox = $(this);
        var tags = $checkbox.data('tags');
        $.each( tags, function(){
            if( filter == this ) $checkbox.prop("checked", !$checkbox.prop("checked"));
        });
    });

});