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

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>