Question

我有一个汽车制造商列表...总共70左右。我想在顶部有一组按钮，当用户点击它们时，它会自动检查预定的汽车制造商。因此，例如，当用户选择“进口”按钮时，将自动选择Acura，Honda，Hyundai，Kia，Mazda，Mitsubishi，Nissan，Scion，Subaru，Suzuki，Toyota和VW的复选框。

有人能指出我正确的方向吗？

Answer 1

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

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

假设每个按钮都有类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"));
        });
    });

});

用于为用户选择特定复选框的按钮

3 个答案: