Button to select certain checkboxes for user

Question

I have a list of car Makes... around 70 in all. I would like to have a set of buttons at the top that, when the user clicks them, automatically checks predetermined car makes for them. So, for example, when the user selects the "Imports" button, the checkboxes for Acura, Honda, Hyundai, Kia, Mazda, Mitsubishi, Nissan, Scion, Subaru, Suzuki, Toyota, and VW are automatically selected.

Can anybody point me in the right direction here?

I haven't been able to find anything online that even comes close to what I'm looking for. The only thing I've found is to select all checkboxes within a form... not individual ones based on their value. — Brds, Jun 27 '12 at 14:30
Possible duplicates: [one](http://stackoverflow.com/questions/2246787/check-marking-all-the-checkbox-using-jquery-on-click-of-a-button), [two](http://stackoverflow.com/questions/2745601/jquery-button-click-to-selct-check-box), [three](http://stackoverflow.com/q/5229023/803285),..and [many more](http://stackoverflow.com/search?q=%5Bjquery%5Dselect+checkboxes+on+button+click). — Asif, Jun 27 '12 at 14:32

Robert · Answer 1 · 2012-06-27T14:48:11.197

Create a separate CSS class for each group and assign those classes to the appropriate elements.

Then when the corresponding button is pressed set the checked attribute on the checkboxes.

Assuming each button had the class type-buttons and the ID attribute set to the desired type, i.e. id="imports".

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

score 1 · Answer 2 · answered Jun 27 '12 at 14:29

1

Add a class to your checkboxes that you want selected, then use that class to check them when the user clicks the button. Something like:

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

answered Jun 27 '12 at 14:29

Igor

33,276
14
79
112

score 1 · Accepted Answer · answered Jun 27 '12 at 14:45

Enjoy: http://jsfiddle.net/v9p5C/

Toggler buttons have a data-filter attribute which specifies what to toggle:

<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>

Checkboxes have a data-tags attribute, which is a JSON array of tags:

<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>

And finally some jQuery to make it work:

$(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"));
        });
    });

});

Of course, you can put those tags into classnames, which can greatly simplify the filtering part, but I couldn't resist the JSON way. — biziclop, Jun 27 '12 at 14:48
I've tried for about an hour now to implement this, and I can't get it. I've tried snagging all the js scripts off the link you posted and including them, but it's still not working. any thoughts? — Brds, Jun 27 '12 at 15:52
What is not working? One thing may be tricky, the proper quoting of the json array into attributes (single/double quotes), but you could replace them to a single space-separated list and use jQuery's http://api.jquery.com/attribute-contains-word-selector/ . — biziclop, Jun 27 '12 at 16:48

Button to select certain checkboxes for user

3 Answers3