jQuery addClass example

Change class name on click in jQuery

HTML

<form  id="form" action='result.php' method='post'>

<ul class="listview checkbox-strip">
	<li><!-- li helps with formatting -->

		<label class="checkbox">
			<input name="quantity" value="one" type="checkbox">
			<input name="prod_id" value="62" type="hidden">
			<span class="label-text">Orange</span>
		</label>
	<BR>
		<label class="checkbox">
			<input name="quantity" value="5" type="checkbox">
			<input name="prod_id" value="62" type="hidden">
			<span class="label-text">Yellow</span>
		</label>


		<label class="checkbox">
		<input name="quantity" value="eighth" type="checkbox"></label>
		<input type=hidden name="prod_id" value=10>
    <input type="button" value="This Button Works on my server" id="submit">
</li>
</form>
<div id = "container"></div>

CSS

/* Custom checkbox & radio button styles */


ul, li{
	list-style: none;
	padding-left: 0;
	font-size:30pt;


}
.icon-check {
	background-image: url('data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"18.134"%20height%3D"15.066"><polygon%20fill%3D"%23fff"%20points%3D"18.134%2C3.119%2015.013%2C0%206.187%2C8.827%203.12%2C5.76%200%2C8.878%206.185%2C15.066%206.187%2C15.064%206.187%2C15.066"%2F><%2Fsvg>');
	background-repeat: no-repeat;
}

.listview > fieldset, .listview > label, .listview > div, .listview > li {
	border-bottom: 1px solid #ddd;
	border-left: .4em dotted transparent;
	padding: 0px 0px;

}

.listview > fieldset:before,
.listview > fieldset:after,
.listview > label:before,
.listview > label:after,
.listview > div:before,
.listview > div:after,
.listview > li:before,
.listview > li:after {
	content: " ";
	display: table;
}

.checkbox,
.radiobutton {
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;

}

.checkbox:before,
.radiobutton:before {
	content: " ";
	display: table;
}

.checkbox:after,
.radiobutton:after {
	clear: both;
	content: " ";
	display: table;
}

.enhanced .checkbox input,
.enhanced .radiobutton input,
.enhanced .radio-strip input {
	position: absolute;
	z-index: 1;
	opacity: 0;
	outline: none;
}

.checkbox .label-text,
.radiobutton .label-text,
.radio-strip .label-text {
	position: relative;
	float: none;
	width: auto;
	display: inline-block;
	padding-left: .5em;
	z-index: 3;
	color: #000;

}
.enhanced .checkbox .label-text,
.enhanced .listview.checkbox-strip .label-text,
.enhanced .listview .radiobutton .label-text,
.enhanced .radio-strip .label-text {
	padding-left: 83px;
	font-size: 20pt;

}

.enhanced .listview.checkbox-strip .inner .label-text {
	font-size: 13px;
	font-size: .8125em;
	padding-left: 0;
}

.checkbox .label-text {
	color: #404041;
}
.checkbox .label-text em...

JavaScript

/*! Shoestring - v1.0.3 - 2015-04-13
* http://github.com/filamentgroup/shoestring/
* Copyright (c) 2015 Scott Jehl, Filament Group, Inc; Licensed MIT & GPLv2 */ 
(function( w, undefined ){
	/**
	 * The shoestring object constructor.
	 *
	 * @param {string,object} prim The selector to find or element to wrap.
	 * @param {object} sec The context in which to match the `prim` selector.
	 * @returns shoestring
	 * @this window
	 */
	function shoestring( prim, sec ){
		var pType = typeof( prim ),
				ret = [],
				sel;

		// return an empty shoestring object
		if( !prim ){
			return new Shoestring( ret );
		}

		// ready calls
		if( prim.call ){
			return shoestring.ready( prim );
		}

		// handle re-wrapping shoestring objects
		if( prim.constructor === Shoestring && !sec ){
			return prim;
		}

		// if string starting with <, make html
		if( pType === "string" && prim.indexOf( "<" ) === 0 ){
			var dfrag = document.createElement( "div" );

			dfrag.innerHTML = prim;

			// TODO depends on children (circular)
			return shoestring( dfrag ).children().each(function(){
				dfrag.removeChild( this );
			});
		}

		// if string, it's a selector, use qsa
		if( pType === "string" ){
			if( sec ){
				return shoestring( sec ).find( prim );
			}

			try {
				sel = document.querySelectorAll( prim );
			} catch( e ) {
				shoestring.error( 'queryselector', prim );
			}

			return new Shoestring( sel, prim );
		}

		// array like objects or node lists
		if( Object.prototype.toString.call( pType ) === '[object Array]' ||
				(window.NodeList && prim instanceof window.NodeList) ){

			return new Shoestring( prim, prim );
		}

		// if it's an array, use all the elements
		if( prim.constructor === Array ){
			return new Shoestring( prim, prim );
		}

		// otherwise assume it's an object the we want at an index
		return new Shoestring( [prim], prim );
	}

	var Shoestring = function( ret, prim ) {
		this.length = 0;
		this.selector = prim;
		shoestring.merge(this, ret);
	};

	// TODO...