jQuery addClass example

Change class name on click in jQuery

HTML

<div>
		<div>
			<b>RADIO 1 :</b>
			<div class="dv1"><label><input type="radio" name="properties[DOOR OPTION]"/>ABC</label></div>
			<div class="dv1"><label><input type="radio" name="properties[DOOR OPTION]"/>DEF</label></div>
		</div>
		<div>
			<b>RADIO 2 :</b>
			<div class="dv1"><label><input type="radio" name="properties[WHATEVER]"/>GHI</label></div>
			<div class="dv1"><label><input type="radio" name="properties[WHATEVER]"/>JKL</label></div>
		</div>
		<div>
			<b>RADIO 3 :</b>
			<div class="dv1"><label><input type="radio" name="properties[TEST SPACE]"/>MNO</label></div>
			<div class="dv1"><label><input type="radio" name="properties[TEST SPACE]"/>PQR</label></div>
			<div class="dv1"><label><input type="radio" name="properties[TEST SPACE]"/>STU</label></div>
		</div>
	</div>

CSS

.dv1{
  display:inline-block;
  width:100px;
  border:1px solid #ccc;
  margin-bottom:4px;
}

.dv1:hover{
  color:red;
}

.active{
  border:1px solid red;
  color:red;
}

label {
  display:inline-block;
  width:100%
}

JavaScript

$("input[type='radio']").on("change",function(){
		var target = $(this).closest("div"); // Find the closest div with this input.

		target.addClass("active") // Add class active (border)
		.parent("div").find("div") // Find all the others div within parents div
		.not(target).removeClass("active"); // Remove others div with class active except the target
	});