Toggle on/off either to off/on another-CodePudding

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 >
  <label for="toggle-1">
    <input id="toggle-1"  type="checkbox">
      <span>
        <small></small>
      </span>
    <small></small>
  </label>
</div>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum vehicula tristique. Vestibulum et est sem. Ut venenatis sagittis gravida. Nam enim tortor, lacinia pretium dolor sit amet, rutrum ultricies ligula. Nunc lacinia metus in sagittis accumsan. Fusce eu urna mi. Sed mollis, erat eget blandit fringilla, nisi justo congue leo, eu fringilla orci tellus non diam. Curabitur id interdum nisi. Sed vulputate consectetur odio et laoreet. Vestibulum nec lorem massa. Morbi massa tortor, maximus vel purus ac, aliquet vulputate tellus.

CodePudding user response：

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 >
  <label for="toggle-1">
    <input id="toggle-1"  type="checkbox">
      <span>
        <small></small>
      </span>
    <small></small>
  </label>
</div>

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