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">
<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>
                        <label for="DeerTrophy" class="col-md-3">
                            <input type="radio" name="AnimalType" value="Deer Trophy" id="DeerTrophy">
                            <img src="https://placeimg.com/100/100/animals" alt="">
                            <span>Deer Trophy</span>
                        </label>
                        <label for="TRexTrophy" class="col-md-3">
                            <input type="radio" name="AnimalType" value="T-Rex Trophy" id="TRexTrophy">
                            <img src="https://placeimg.com/100/100/animals" alt="">
                            <span>T-Rex Trophy</span>
                        </label>
                        <label for="Doberman" class="col-md-3">
                            <input type="radio" name="AnimalType" value="Doberman" id="Doberman">
                            <img src="https://placeimg.com/100/100/animals" alt="">
                            <span>Doberman</span>
                        </label>
                        <label for="Elephant" class="col-md-3">
                            <input type="radio" name="AnimalType" value="Elephant" id="Elephant">
                            <img src="https://placeimg.com/100/100/animals" alt="">
                            <span>Elephant</span>
                        </label>
                        <label for="Unicorn" class="col-md-3">
                            <input type="radio" name="AnimalType" id="Unicorn"...

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;
}

.animalsForm .animals-shipping-info label,
.animalsForm .animals-billing-info label,
.animalsForm .animals-payment-info label {
    text-align: left !important;
}

.animalsCart {
    position: relative;
    height: 100%;
}

.animalsCartContainer {
    position: fixed !important;
	width: 400px;
	height: 100%!important;
	top: 0;
	bottom: 0;
	right: 0;
	margin: 0!important;
	padding: 0;
}
.animalsCartContainer .panel {
	margin: 0;
	height: 100%!important;
	border-radius: 0;
}

.animalsCart h3 {
    color: #000;
    margin-bottom: 10px;
}

.animalsCart ul {
    padding-left: 0;
    list-style-type: none !important;
    border-bottom: solid 1px #ccc !important;
}

.animalsCart ul li {
    border-top: solid 1px #ccc !important;
    padding-left: 15px;
    padding-left: 0;
}

.animalsCart .cart-item-list li span {
    float: right;
}

/* HIDE RADIO */
.animalsForm [type=radio] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* CHECKED STYLES */
.animalsForm [type=radio]:checked + img {
    /* outline: 2px solid #f00; */
    filter: hue-rotate(90deg);
}

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...