Jquery, dynamic checkbox selecting

Question

I have a dropdown list with different categories which i've setup like this:

Main1
sub1
sub1
sub1

Main2
sub2
sub2
sub2

etc.

When I press on "Main1" all "Sub1"s will be checked, and so on. I have made a function that works.

$('.main_check_1').change(function() {

        var checkboxes = $(".check_1");

        if($(this).is(':checked')) {

            checkboxes.prop('checked', true);

        } else {

            checkboxes.prop('checked', false);

        }
    });

but only if I hard code it, it doesn't work dynamically.

(On my admin page i'll be capable of adding more and give them an id, Main"1", Sub"1" etc).

Any idea how I could do this?

Can you show the HTML?

AmmarCSE
– AmmarCSE

2015-08-09 09:18:41 +00:00
Commented Aug 9, 2015 at 9:18 — AmmarCSE
– AmmarCSE, Commented Aug 9, 2015 at 9:18
Can you fiddle this...

EugenSunic
– EugenSunic

2015-08-09 09:21:30 +00:00
Commented Aug 9, 2015 at 9:21 — EugenSunic
– EugenSunic, Commented Aug 9, 2015 at 9:21

Marco de Zeeuw · Accepted Answer · 2015-08-09 10:04:46Z

1

Instead of giving the mains a unique classname, you could give them a unique id-name instead and a non-unique classname, for instance 'checklist'. Make sure the classnames of the subs are the same as their parent-main-id. Now you can make something like:

$('.checklist').change(function () {
    var mainCheck = this;
    $("." + mainCheck.id).each(function () {
        $(this).prop('checked', $(mainCheck).prop('checked'));
    });
});

JSFiddle

answered Aug 9, 2015 at 10:04

Marco de Zeeuw

5063 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gautam G · Accepted Answer · 2015-08-09 09:50:31Z

0

changing your code into following might help

$(document).on('change', '.main_check', function() {
    var mainCheck = $(this),
        subChecks = mainCheck.children('.sub-check');

    if(mainCheck.is(':checked')) {

        checkboxes.prop('checked', true);

    } else {

        checkboxes.prop('checked', false);

    }
});

Just make use of "on" method.

answered Aug 9, 2015 at 9:50

Gautam G

4942 gold badges7 silver badges15 bronze badges

Comments

Tariq · Accepted Answer · 2015-08-09 09:55:24Z

0

This may be useful - notice how I Managed the HTML:

$('#main_check_1').click(function() {
this_box = $(this);
        var checkboxes = $('.check1');

    checkboxes.each(function(){
        checkboxes.prop('checked', true);
        if(this_box.is(':checked')) {

            checkboxes.prop('checked', true);

        } else {

            checkboxes.prop('checked', false);

        }
    });

    });

JSFiddle

answered Aug 9, 2015 at 9:55

Tariq

2,8813 gold badges25 silver badges29 bronze badges

Collectives™ on Stack Overflow

Jquery, dynamic checkbox selecting

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related