JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<input class="adType" name="adType" type="radio" value="platinum">
<input class="adType" name="adType" type="radio" value="gold">
<input class="adType" name="adType" type="radio" value="silver">
<div class="col-md-12" id="step2">
     <h3>Step 2</h3>

    <div id="allPackage">
        <label class="checkbox">
            <input checked class="location" name="countrylocation[]" type="checkbox" value="UK">UK (default)</label>
        <label class="checkbox">
            <input class="location" name="countrylocation[]" type="checkbox" value="SP">Spain</label>
        <label class="checkbox">
            <input class="location" name="countrylocation[]" type="checkbox" value="IT">Italy</label>
    </div>
    <label class="checkbox">
        <input class="location" name="countrylocation[]" type="checkbox" value="FULLPACK">Full Language Package</label>
</div>
<div class="col-md-9">
    <p>Price: <span id="totalprice"></span> EUR</p>
</div>

JavaScript

var adType;
var totalprice = 0.0;
var location;
var countLocations = 1;

//hide step 2 div
$('#step2').hide();
$('#totalprice').html(totalprice);

$('.adType').change(function () {
    //after select one show next step
    $('#step2').show('slow');
    saveCheckBoxState(adType);
    adType = $(this).val();
    //var checked = $("#isAgeSelected").is(':checked').val();   
    console.log(adType);
    switch (adType) {
        case "platinum":
            totalprice = 250.00;
            $('#totalprice').html(totalprice * countLocations)
            break;
        case "gold":
            totalprice = 125.00;
            $('#totalprice').html(totalprice * countLocations)
            break;
        case "silver":
            totalprice = 50.00;
            $('#totalprice').html(totalprice * countLocations)
            break;
        default:
            totalprice = 0.00;
            $('#totalprice').html(totalprice * countLocations)
    }
    loadCheckBoxState(adType);
});

$('.location').change(function () {

    location = $(this).val();
    countLocations = $('[name="countrylocation[]"]:checked').length;
    $('#totalprice').html(totalprice * countLocations);
    console.log(countLocations);

    if (location == 'FULLPACK') {

        $("#allPackage").toggle(function () {
            $('#totalprice').html("new Price!")
        });

    }
});
window._currentState = {};

function saveCheckBoxState(adType) {
    if ($('[name="countrylocation[]"]:checked').length > 0) {
        var currentState = $('[name="countrylocation[]"]:checked').map(function (e, obj) {
            return obj.value;
        });
        0
        window._currentState[adType] = currentState;
    }
}

function loadCheckBoxState(adType) {
    debugger;
   var currentObj = window._currentState[adType];
    for(i=0;i<=currentObj.length;i++)
    {
        $("[value='"+ currentObj[i] +"']").prop("checked","checked");
    }
}