how to create custom on/off buttons

on-off buttons

<div class="wrapper">
  <input type="radio" name="switch" class="switch ternOn" id="ternOn" checked>
  <label class="switch__label" for="ternOn">Вкл</label>
  <input type="radio" name="switch" class="switch ternOff" id="ternOff">
  <span class="switcher"></span>
  <label class="switch__label" for="ternOff">Выкл</label>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

/** CSS **/

.wrapper {margin-top: 15px;}

.switch {display: none;}
.switch__label {padding-left: 5px; padding-right: 5px; position: relative; cursor: pointer;}

.switcher {width: 25px; height: 15px; background-color: #eee; display: inline-block; vertical-align: middle; -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; border: 1px solid #ccc; position: relative; cursor: pointer;}

.switcher:before {content: ''; background-color: #ccc; left: 1px;
top: 1px;
position: absolute;
display: block;
width: 13px;
height: 13px; z-index: 2; -webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.ternOn:checked ~ .switcher {background-color: #80e450; border-color: #3ebb00;}
.ternOn:checked ~ .switcher:before {background-color: #3ebb00;}

.ternOff:checked ~ .switcher {background-color: #eee; border-color: #ccc;}
.ternOff:checked ~ .switcher:before {background-color: #ccc; left: 10px;}

/** jQuery **/
$(document).ready(function(){
  $('.switcher').on('click', function(){
    $('input[type="radio"]').not(':checked').prop("checked", true);
  });

});