CODEWITHSUNDEEP
jqueryhtml
Kristian
Kristian

Reputation: 47

jquery checkbox html problems

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?

Upvotes: 0

Views: 59

Answers (4)

Martin
Martin

Reputation: 1822

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;
    });
});

Upvotes: 2

j08691
j08691

Reputation: 207861

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.

Upvotes: 0

Lix
Lix

Reputation: 47956

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

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

Here is a simple demo

Upvotes: 0

Justin Chmura
Justin Chmura

Reputation: 2027

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

Upvotes: 0

Related Questions