将开/关切换为关闭/打开另一个

Question

我有两个切换按钮，我希望两个按钮以这种方式彼此相反地工作：

当我打开/绿色First Toggle时， Second Toggle应该关闭，反之亦然（当 Second Toggle 打开/绿色时， First Toggle 应该关闭/红色）

 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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Vestibulum interdum vehicula tristique。 前庭等。 Ut venenatis sagittis gravida。 Nam enim tortor，lacinia pretium dolor sit amet，rutrum ultricies ligula。 Nunc lacinia metus 在 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。 前庭 nec lorem massa。 Morbi massa tortor，maximus vel purus ac，aliquet vulputate tellus。

Answer 1

使用 JQuery，这是 function，当其中一个开启时，另一个将关闭。

 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>