mercredi 3 juin 2015

Select choice based on what's selected (Radio buttons)

Sorry to bother everyone but I'm in a bit of a snag. I'm trying to setup my code to select an item based on the country selected and type of shipping. I can get it to work with just the country but when I try to add they type of shipping it doesn't work and I'm not sure what else to do.

Here's my JQuery:

$(document).ready(function() {

$(".choice").hide();

var isUS = $("#__billingCountrySelect__").val() === '1';
var isNotUS = !isUS;

$("#__billingCountrySelect__").change(function() {
    isUS = $("#__billingCountrySelect__").val() === '1';
    isNotUS = !isUS;
    checkRadio1();
    checkRadio2();
    checkRadio3();
    checkRadio4();
    checkRadio5();
    checkRadio6();
});

$(".choicePick").click(function() {
    checkRadio1();
    checkRadio2();
    checkRadio3();
    checkRadio4();
    checkRadio5();
    checkRadio6();
});

function checkRadio1() {

    if (isUS && $("#first").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#US3').click();
    } 
    else if(isNotUS && $("#first").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#INTL3').click();
    }
}

function checkRadio2() {

    if (isUS && $("#second").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#US2').click();
    } 
    else if(isNotUS && $("#second").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#INTL2').click();
    }
}

function checkRadio3() {

    if (isUS && $("#third").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#US1').click();
    }

    else if(isNotUS && $("#third").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#INTL1').click();
    }
}

function checkRadio4() {

    if (isUS && $(".ADS3").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#US_ADS3').click();
    }

    else if(isNotUS && $("#ADS").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#INTL_ADS3').click();
    }
}
function checkRadio5() {

    if (isUS && $(".ADS2").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#US_ADS2').click();
    }

    else if(isNotUS && $("#ADS").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#INTL_ADS2').click();
    }
}
function checkRadio6() {

    if (isUS && $(".ADS1").prop('checked')){
        $('.choice input[type=radio]').removeAttr('checked');
        $('#US_ADS1').click();
    }

}
});

I know there's a shorter way to write this but this is setup for testing at the moment. There are a total of 11 different choices. The first 6 are normal selection but if they select ADS it switches to the choice with that shipping option.

The HTML code is:

<input type="radio" name="multiChoice" id="first"  class="choicePick" />    
<span style="font-size:1.8em;">Choice 1</span>
<br>
<input type="radio" name="multiChoice" id="second"  class="choicePick"/>  
<span style="font-size:1.8em;">Choice 2</span>
<br>
<input type="radio" name="multiChoice" id="third"  class="choicePick"/><span 
style="font-size:1.8em;">Choice 3</span>
<br>   
<br> 
<input type="checkbox" name="multiChoice" class="choicePick ADS1 ADS2   
ADS3"/><span style="font-size:1.8em;">ADS</span>


<select id="#__billingCountrySelect__">
  <option value="UNITED STATES">UNITED STATES</option>
  <option value="OTHER">OTHER</option>
</select>
   <br><br>

<div class ="choice"><input type="radio" id="US3"/>US3
</div>
<div class ="choice"><input type="radio" id="INTL3"/>INTL3
</div>
 <div class ="choice"><input type="radio" id="US2"/>US2
</div>
<div class ="choice"><input type="radio" id="INTL2"/>INTL2
</div>
<div class ="choice"><input type="radio" id="US1"/>US1
</div>
<div class ="choice"><input type="radio" id="INTL1"/>INTL1
</div>
<div class ="choice"><input type="radio" id="US_ADS3"/>US_ADS3
</div>
<div class ="choice"><input type="radio" id="INTL_ADS3"/>INTL_ADS3
</div>
<div class ="choice"><input type="radio" id="US_ADS2"/>US_ADS2
</div>
<div class ="choice"><input type="radio" id="INTL_ADS2"/>INTL_ADS2
</div>
<div class ="choice"><input type="radio" id="US_ADS1"/>US_ADS1
</div>

Sorry for so much code but I'd thought I'd give as much information as I could to help. Please let me know what I'm doing wrong.




Aucun commentaire:

Enregistrer un commentaire