jquery checkbox html problems

Question

I'm facing some problems with some jQuery or HTML.

I have some checkboxes. And I want to have a "primary" checkbox so a few checkboxes under that category get checked when the "primary" gets checked.

Well, that's OK. I solved it like this:

    $('#extraPolish').change(function() {
    if ($("#extraPolish").is(':checked') == true) {
        $("#extraPolish_Inside").attr('checked', 'checked');
        $("#extraPolish_UnderFender").attr('checked', 'checked');
        $("#extraPolish_OverFender").attr('checked', 'checked');
        console.log('checkd');
    } else {
        $("#extraPolish_Inside").removeAttr('checked');
        $("#extraPolish_UnderFender").removeAttr('checked');
        $("#extraPolish_OverFender").removeAttr('checked');
    }
});

So when you check #extraPolish those under there get checked, and when you remove check on #extraPolish those will be unchecked.

The problem is when i try to check them again it shows in the HTML code, but won't get checked on my Google Chrome.

Any Idea?

Only fails on Google Chrome? Please add a Google Chrome tag. — Steve Wellens
– Steve Wellens, Commented Feb 20, 2013 at 18:14
What if you use $('#checkboxid').checked = $('#extraPolish').checked ? Saves an if statement. — DiMono
– DiMono, Commented Feb 20, 2013 at 18:15

Martin · Accepted Answer · 2013-02-20 19:00:44Z

2

As others have stated - with jquery 1.9 prop() is the function you want .attr() does something different, missed that in the first place...

This would be my solution.

$(document).ready(function () {
    $('#extraPolish').change(function() {
        $("#extraPolish_Inside").prop('checked', this.checked);
        $("#extraPolish_UnderFender").prop('checked', this.checked);
        $("#extraPolish_OverFender").prop('checked', this.checked);
        return false;
    });
});

edited Feb 20, 2013 at 19:00

answered Feb 20, 2013 at 18:18

Martin

1,8322 gold badges15 silver badges23 bronze badges

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

Comments

Justin Chmura · Accepted Answer · 2013-02-20 18:17:11Z

0

Try using $("#extraPolish_Inside').prop('checked', true); and $("#extraPolish_Inside').prop('checked', false); instead of $("#extraPolish_Inside").attr('checked', 'checked');

Edit: jsfiddle example - http://jsfiddle.net/rvtvr/1

answered Feb 20, 2013 at 18:17

Justin Chmura

2,0571 gold badge17 silver badges17 bronze badges

Comments

Lix · Accepted Answer · 2013-02-20 18:17:36Z

0

In stead of totally removing the checked attribute, try setting it simply to null.

$('#extraPolish_Inside').attr('checked',null);

Here is a simple demo

answered Feb 20, 2013 at 18:17

Lix

48.2k12 gold badges107 silver badges134 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

Use .prop('checked', false); and .prop('checked', true); instead.

$(document).ready(function () {
    $('#extraPolish').change(function() {
        if ($("#extraPolish").is(':checked') == true) {
            $("#extraPolish_Inside").prop('checked', true);
            $("#extraPolish_UnderFender").prop('checked', true);
            $("#extraPolish_OverFender").prop('checked', true);
            console.log('checkd');
        } else {
            $("#extraPolish_Inside").prop('checked', false);
            $("#extraPolish_UnderFender").prop('checked', false);
            $("#extraPolish_OverFender").prop('checked', false);
        }
        return false;
    });
});

jsFiddle example

See http://jquery.com/upgrade-guide/1.9/#attr-versus-prop- for a full explanation and why the behavior differs between jQuery 1.9 and earlier.

Collectives™ on Stack Overflow

jquery checkbox html problems

4 Answers 4

Comments

Comments

Here is a simple demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related