vendredi 30 décembre 2016

Influencing secondary radio buttons based on primary checkbox choice

I have one group of checkboxes and one group of radio buttons. They are as follows:

PRIMARY CHECKBOXES

<input class="filter" type="checkbox" id="theme1" name="theme" value="adventure">
<label for="theme1">Adventure</label>
<input class="filter" type="checkbox" id="theme2" name="theme" value="attraction">
<label for="theme2">Attraction</label>
<input class="filter" type="checkbox" id="theme3" name="theme" value="leisure">
<label for="theme3">Leisure</label>
<input class="filter" type="checkbox" id="theme4" name="theme" value="culture">
<label for="theme4">Culture</label>
<input class="filter" type="checkbox" id="theme5" name="theme" value="nature">
<label for="theme5">Nature</label>

SECONDARY RADIO BUTTONS

<input class="filter combo" type="radio" id="combo1" name="combo">
<label for="combo1">Adv Att</label>
<input class="filter combo" type="radio" id="combo2" name="combo">
<label for="combo2">Cul Att</label>
<input class="filter combo" type="radio" id="combo3" name="combo">
<label for="combo3">Adv Nat</label>
<input class="filter combo" type="radio" id="combo4" name="combo">
<label for="combo4">Att Lei</label>

JQUERY CODE

$(':checkbox').change(function() {
    if ($('#theme1').is(":checked") && $('#theme2').is(":checked")) {
        $('#combo1').prop('checked', true);
    }
})
$(':checkbox').change(function() {
    if ($('#theme1').is(":checked")) {
        $('#combo2').prop('checked', true);             
    }
})

By doing the above, there is a slight problem. When I select the Adventure checkbox, the Cul Att radio button gets highlighted. But, when I check the Attraction checkbox along with Adventure checkbox, I'd want the radio button to now be on Adv Att. I have this as a condition on my jquery code above, but it still won't work. What am I doing wrong? Any help is much appreciated!




Aucun commentaire:

Enregistrer un commentaire