jQuery addClass example

Change class name on click in jQuery

by Jesse M

HTML

<fieldset>
<legend>Checkout: Customer Information</legend>
<input type="hidden" name="Action" value="ORDR">

<p>For orders to Alaska, Hawaii, and Guam: Please call for shipping quote. No shipping available to PO boxes. Valid phone number must be provided for secure shipping.</p>
<ul class="c-form-list o-layout o-layout--wide u-text-uppercase">
<li class="c-form-list__item c-form-list__item--full o-layout__item c-heading-echo u-text-bold u-text-uppercase">Billing Information</li>
<li class="c-form-list__item o-layout__item u-width-12 u-font-small u-hidden" id="billing_controls" style="visibility: visible;">
<label class="c-form-checkbox">
<input id="billing_to_show" class="c-form-checkbox__input" type="checkbox" name="billing_to_show" value="1">
<span class="c-form-checkbox__caption u-font-small u-text-uppercase">Billing Information Same as Shipping</span>
</label>
</li>
</ul>
<section id="billing_fields">

<ul class="c-form-list o-layout o-layout--wide u-text-uppercase">
<li class="c-form-list__item o-layout__item u-width-4--m form_row">
<label class="c-form-label u-text-medium u-color-gray-40 is-required u-font-tiny" for="l-BillFirstName">First Name</label>
<input id="l-BillFirstName" class="c-form-input c-form-input--large" type="text" name="BillFirstName" value="Miva" required="">
</li>
<li class="c-form-list__item o-layout__item u-width-4--m form_row">
<label class="c-form-label u-text-medium u-color-gray-40 is-required u-font-tiny" for="l-BillLastName">Last Name</label>
<input id="l-BillLastName" class="c-form-input c-form-input--large" type="text" name="BillLastName" value="Test" required="">
</li>
<li class="c-form-list__item o-layout__item u-width-4--m form_row">
<label class="c-form-label u-text-italic u-color-gray-40 u-font-tiny" for="l-BillCompany">Company (Optional)</label>
<input id="l-BillCompany" class="c-form-input c-form-input--large" type="text" name="BillCompany" value="Miva Inc">
</li>
<li class="c-form-list__item o-layout__item u-width-8--m...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

JavaScript

var $this = $('#billing_fields'),
		billingInputs		= $this.find('input'),
		billingSelects	= $this.find('select');


function updateFields(){
	for(i = 0; i < billingInputs.length; ++i){
		var value = $(billingInputs[i]).val(),
    		name = $(billingInputs[i]).attr('name').replace('Bill', 'Ship');
    $('[name="' + name + '"]').val(value);
	}
	for(i = 0; i < billingSelects.length; ++i){
		var value = $(billingSelects[i]).val(),
    		name = $(billingSelects[i]).attr('name').replace('Bill', 'Ship');
    $('[name="' + name + '"]').val(value);
	}
}


$('[name="shipping_to_show"]').click(function(){
	var $this = $('#shipping_fields');
	if($this.is(':visible')){
		$($this).slideUp(function(){
			updateFields();
		});
	}else{
		$($this).slideDown('slow');
	}
});