jQuery addClass example

Change class name on click in jQuery

by Cory Hughes

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Dropdowns vs Radios -->
<div class="row colour_container">
    <div class="container">
        <div class="row pepakura__content">
            <div class="col-sm-8 col-md-8 animalsForm">
                <!-- <h2>Order Now</h2> -->
                <form class="animalsForm col-md-12">
                    <div class="col-md-12">
                        <h3>Order Info</h3>
                        <p>Which Papercraft Animal would you like?</p>
						<select name="AnimalType" id="SelectAnimalType">
                            <option value="Deer Trophy" id="DeerTrophy">Deer Trophy</option>
							<option value="T-Rex Trophy" id="TRexTrophy">T-Rex Trophy</option>
							<option value="Doberman" id="Doberman">Doberman</option>
							<option value="Elephant" id="Elephant">Elephant</option>
							<option id="Unicorn" value="Unicorn">Unicorn</option>
							<option value="Cat" id="Cat">Cat</option>
                            <option value="Deer" id="Deer">Deer</option>
						</select>
                        <p>What size?</p>
						<select name="AnimalSize" id="SelectAnimalSize">
                            <option value="Trophy" id="SizeTrophy">Trophy <span class="optionPrice">$229</span></option>
							<option value="Small" id="SizeSmall">Small <span class="optionPrice">$299</span></option>
							<option value="Medium" id="SizeMedium">Medium <span class="optionPrice">$489</span></option>
							<option value="Large" id="SizeLarge">Large <span class="optionPrice">$719</span></option>
							<option id="X-Large" value="SizeX-Large">X-Large <span class="optionPrice">$959</span></option>
							<option value="Conference" id="SizeConference">Conference <span class="optionPrice">$1199</span></option>
						</select>
						<p>Choose your Animal's Coat</p>
						<select name="AnimalCoat" id="SelectAnimalCoat">
                            <option value="White Vinyl"...

CSS

/* Form Styles */
.animalsForm {
    text-align: left;
    color: #000 !important;
}

.animalsForm label {
    display: inline-block;
    text-align: center;
    color: #000 !important;
}

.animalsForm label:hover {
    cursor: pointer;
}

.animalsForm label span {
    display: block;
    color: #000;
}

.animalsForm .animals-shipping-info,
.animalsForm .animals-billing-info,
.animalsForm .animals-payment-info {
    text-align: left;
	margin-bottom: 25px;
}

.animalsForm .animals-shipping-info label,
.animalsForm .animals-billing-info label,
.animalsForm .animals-payment-info label {
    text-align: left !important;
}
.animalsForm .animals-shipping-info label:nth-of-type(odd),
.animalsForm .animals-billing-info label:nth-of-type(odd),
.animalsForm .animals-payment-info label:nth-of-type(odd) {
	padding-left: 2px;
}
.animalsForm .animals-shipping-info label:nth-of-type(even),
.animalsForm .animals-billing-info label:nth-of-type(even),
.animalsForm .animals-payment-info label:nth-of-type(even) {
	padding-right: 3px;
}

.animalsForm select {
	display: block;
	width: 100%;
	padding: .75rem .75rem;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin-bottom: 25px;
}
.animalsForm input {
	display: block;
	width: 100%;
	padding: .75rem .75rem;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin-bottom:10px;
}
.animalsForm label[for="CheckboxAnimalBuilt"],
.animalsForm label input,
.animalsForm label .optionPrice {
	text-align: left;
	display:inline-block;
	width: auto;
}
.animalsForm label input {
	margin-right: 5px;
}
.animalsCart #orderQuantity...

JavaScript

var radioBoxes = [];
var m = [];
var productName = "";
var basePrice = "";
var printedPrice = "";
var vinylPrice = "";
var buildPrice = "";
/* var row = []; */

$(document).ready(function() {
    $(".cart-item-list").html('');
});


$("#UseShippingInfo").click(function() {
    checkBilling();
});

$("input[type=radio]").click(function() {
    row = [];
    buildList();
});

function checkBilling() {
    var value = $('#UseShippingInfo').prop('checked');
    console.log(value);
    if (value == true) {
        console.log("Yes");
        $('#BillingInfoContainer').hide();
    } else {
        console.log("Nope");
        $('#BillingInfoContainer').show();
    }
    console.log("Value: " + value);
}

function buildList() {
    radioBoxes = [];
    $(".cart-item-list").html('');
    $.each($("input[name^='Animal']:checked"), function() {
        radioBoxes.push($(this).val());
    });
    productName = radioBoxes[0];
    console.log("Radio Names: " + radioBoxes.join(", "));
    buildPricing()
}

function buildPricing() {
    var row = [];
    // 1 //
    if (radioBoxes[1] === "Trophy") {
        basePrice = "229"
    } else if (radioBoxes[1] === "Small") {
        basePrice = "299"
    } else if (radioBoxes[1] === "Medium") {
        basePrice = "489"
    } else if (radioBoxes[1] === "Large") {
        basePrice = "719"
    } else if (radioBoxes[1] === "X-Large") {
        basePrice = "959"
    } else if (radioBoxes[1] === "Conference") {
        basePrice = "1199"
    } else {
        // Do Nothing
    }

    // 2 //
    if (radioBoxes[2] === "Plain White" ) {
    	printedPrice = "599";
    } else if (radioBoxes[2] === "Printed Design" ) {
    	printedPrice = "599";
    } else {
    	// Do Nothing
    }

    // 3 //
    if (radioBoxes[3] === "Clear Laminate") {
        vinylPrice = "0";
    } else if (radioBoxes[3] === "White Vinyl") {
        vinylPrice = "599";
    } else if (radioBoxes[3] === "Black Vinyl") {
        vinylPrice = "100";
    } else if...