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