Improve JQuery - Switches

Question

I would like to improve my JQuery Script. I'm starting with it but I don't know if I'm doing "the correct way". Although the code is working the way I want, I think that I'm doing the wrong way with all those toggleClass

		$(".switch-one .switch-body").click(function()	{

		$(".switch-one .switch-body").toggleClass("not-selected");
		$(".switch-two .switch-body").toggleClass("selected");
		$(".switch-one .switch-conmutter" ).toggleClass("off");
	    $(".switch-two .switch-conmutter").toggleClass("on");
	    
	      
		});

		$(".switch-two .switch-body").click(function()	{
		$(".switch-two .switch-body").toggleClass("selected");
		$(".switch-one .switch-body").toggleClass("not-selected");
		$( ".switch-two .switch-conmutter" ).toggleClass("on");
	    $(".switch-one .switch-conmutter").toggleClass("off");
	    	    
		});
				

label {
  left: 20px;
  position: relative;
  text-align: center;
  
}

.switch-one, .switch-two {
  height: 25px;
}

.switchers {
  font-size: 12px;
  float: left;
  width: 220px;
  
}

.switch-body {
  
  border-radius: 16px;
  background: #eee;
  height: 20px;
  width: 50px;
  float: right;
  z-index: 1;
}

.switch-conmutter {
  background: white;
  box-shadow: 1px 1px 3px #bbb, -1px -1px 3px #bbb;
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50px;
  z-index: 2;
  left: 0;
  transition: ease-in-out 0.5s;
    
}

.switch-body:hover {
  cursor: pointer;
}

.selected {
  
  background: #F58E43;
  transition: background 0.5s linear;
  
}

.not-selected {
  
  background: #eee;
  transition: background 0.5s linear;
  
}

.on {
  left: 30px;
  transition: ease-in-out 0.5s;
}

.off {
  left: 0;
  transition: ease-in-out 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switchers"> 
			<div class="switch-one"> 
			<label>SWITCH ONE</label>
			<div class="switch-body selected">
			<div id="switch-one-switch" class="switch-conmutter on"></div>
			</div>
			
	    </div>

		<div class="switch-two"> 
			<label>SWITCH TWO</label>
			
			<div class="switch-body">
			<div id="switch-two-switch" class="switch-conmutter"></div>
			</div>
			
			</div>
		</div>

Answer 1

There may be simpler ways, but this is using jQuery and allows for as many other switches.

It is also assuming you will always want one switch active.

EDIT: Just saw you're looking to replace all the toggle/add/remove classes. This may not be a good answer.

$(".switch-body").click(function()	{
    $('.switch-body').removeClass('selected');
    $(this).addClass('selected');
    $('.switch-body .switch-conmutter').addClass('off');
    $('.switch-body .switch-conmutter').removeClass('on');
    $(this).find('.switch-conmutter').removeClass('off');
    $(this).find('.switch-conmutter').addClass('on');     
});
				

label {
  left: 20px;
  position: relative;
  text-align: center;
}
.switch, .switch {
  height: 25px;
}
.switchers {
  font-size: 12px;
  float: left;
  width: 220px;
}
.switch-body {
  border-radius: 16px;
  background: #eee;
  height: 20px;
  width: 50px;
  float: right;
  z-index: 1;
}
.switch-conmutter {
  background: white;
  box-shadow: 1px 1px 3px #bbb, -1px -1px 3px #bbb;
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50px;
  z-index: 2;
  left: 0;
  transition: ease-in-out 0.5s;
}
.switch-body:hover {
  cursor: pointer;
}
.selected {
  background: #F58E43;
  transition: background 0.5s linear;
}
.not-selected {
  background: #eee;
  transition: background 0.5s linear;
}
.on {
  left: 30px;
  transition: ease-in-out 0.5s;
}
.off {
  left: 0;
  transition: ease-in-out 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switchers"> 
    <div class="switch"> 
	    <label>SWITCH ONE</label>
		<div class="switch-body selected">
			<div class="switch-conmutter on"></div>
		</div>
	</div>

    <div class="switch"> 
	    <label>SWITCH TWO</label>
		<div class="switch-body selected">
			<div class="switch-conmutter"></div>
		</div>
	</div>

    <div class="switch"> 
	    <label>SWITCH THREE</label>
		<div class="switch-body selected">
			<div class="switch-conmutter"></div>
		</div>
	</div>

    <div class="switch"> 
	    <label>SWITCH FOUR etc...</label>
		<div class="switch-body selected">
			<div class="switch-conmutter"></div>
		</div>
	</div>
</div>