Toggle on/off either to off/on another

Question

I have two toggle buttons, I want both buttons to work in opposite for each other in such a way:

When I toggle on/green First Toggle, Second Toggle should be turned off and vice versa (when Second Toggle is on/green, First Toggle should be off/red)

div.switcher label {
    padding: 0;
}
div.switcher label input {
    display: none;
}
div.switcher label * {
    vertical-align: middle;
}
input:checked {
    background-color: #46c146;
    gap: 10px;
    border: 4px solid red;
}
input[type=checkbox], input[type=radio] {
    cursor: pointer !important;
    width: 38px;
    height: 38px;
    background-color: green;
    border-radius: 54%;
    vertical-align: middle;
    border: 3px double red;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
div.switcher label input:checked+span {
    background: green;
    border-color: green;
}
div.switcher label input+span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 26px;
    background: red;
    border: 2px solid red;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
div.switcher label input:checked+span small {
    left: 50%;
}
div.switcher label input+span small {
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    left: 0;
}

<label>First Toggle</label>
<div class="switcher">
  <label for="toggle-1">
    <input id="toggle-1" class="my_features" type="checkbox">
      <span>
        <small></small>
      </span>
    <small></small>
  </label>
</div>

<label>Second Toggle</label>
<div class="switcher">
  <label for="toggle-2">
    <input id="toggle-2" class="my_features" type="checkbox">
      <span>
        <small></small>
      </span>
    <small></small>
  </label>
</div>

Answer 1

Using JQuery, here is the function when either is on another will be off.

var allIds = [ "toggle-1", "toggle-2" ];
function uncheck( event ) 
{
   var id = event.target.id;
   allIds.forEach( function( id ){
      if ( id != event.target.id )
      {
         document.getElementById( id ).checked = false;
      }
   });
}

jQuery("#toggle-1").click(uncheck);
jQuery("#toggle-2").click(uncheck);

div.switcher label {
    padding: 0;
}
div.switcher label input {
    display: none;
}
div.switcher label * {
    vertical-align: middle;
}
input:checked {
    background-color: #46c146;
    gap: 10px;
    border: 4px solid red;
}
input[type=checkbox], input[type=radio] {
    cursor: pointer !important;
    width: 38px;
    height: 38px;
    background-color: green;
    border-radius: 54%;
    vertical-align: middle;
    border: 3px double red;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
div.switcher label input:checked+span {
    background: green;
    border-color: green;
}
div.switcher label input+span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 26px;
    background: red;
    border: 2px solid red;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
div.switcher label input:checked+span small {
    left: 50%;
}
div.switcher label input+span small {
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>First Toggle</label>
<div class="switcher">
  <label for="toggle-1">
    <input id="toggle-1" class="my_features" type="checkbox">
      <span>
        <small></small>
      </span>
    <small></small>
  </label>
</div>

<label>Second Toggle</label>
<div class="switcher">
  <label for="toggle-2">
    <input id="toggle-2" class="my_features" type="checkbox">
      <span>
        <small></small>
      </span>
    <small></small>
  </label>
</div>