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>

Answer 2

I would rather use some other js framework (like knockoutJs in my case) for this purpose. See this snippet. Looks much simpler, isn't it?

var SomeViewModel = function() {
  var self = this;
  self.flag = ko.observable(false);
  self.handler = function() {
    self.flag(!self.flag());
  };
};
ko.applyBindings(new SomeViewModel());

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://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<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" data-bind="css: {'not-selected' : flag, 'selected' : !flag() }, click: handler">
      <div id="switch-one-switch" class="switch-conmutter on" data-bind="css: {'off' : flag, 'on' : !flag() }"></div>
    </div>

  </div>

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

    <div class="switch-body" data-bind="css: {'not-selected' : !flag(), 'selected' : flag }, click: handler">
      <div id="switch-two-switch" class="switch-conmutter" data-bind="css: {'on' : flag, 'off' : !flag() }"></div>
    </div>

  </div>
</div>