Question

This is a very simple use of jQuery that I can’t get working.

When one check box is checked, I’d like the other to become checked.

HTML:

<input onchange="toggleRegion()" id="ESARO" type="checkbox" class="region"
value="ESARO" name="ESARO">ESARO

<br /><br />

<input type="checkbox" class="country" value="Afghanistan" name="country2"
/>Afghanistan

jQuery:

function toggleRegion() {
    if ($('#ESARO').is(':checked')) {
        $('input[value="Afghanistan"]').attr('checked', true);
    }
}

jsfiddle:

http://jsfiddle.net/jsJU8/

What I’ve tried:

I have another function which does a very similar thing for a group of check boxes by class which works perfectly:

function toggleStatus() {
if ($('#TLO1').is(':checked')) {
        $('.country').attr('checked', true);

    } 
}

So I presume that the error lies in the selection of the element by value, rather than by class, as this is the only difference between the functions.

To this end I’ve tried adjusting that selector;’s syntax to match various examples I’ve found (single quote, double quote, no quote etc) but haven’t had any luck.#

Although I note that it may be a possible error that I’m using javascript (onChange) to call a jQuery function. Is that an issue?

All help greatly appreciated – thank you

Answer 1

You code is working but you have to choose no-wrap (body) option in first drop down.

Live Demo

function toggleRegion() {
    if ($('#ESARO').is(':checked')) {
        $('input[value="Afghanistan"]').attr('checked', true);
    }
}