如何连接两个选项和切换开关按钮

Question

我想连接两个标签和拨动开关。如果单击切换开关，则希望在单击相应标签时激活开关。但是，如果您单击同一个标签，则不希望开关移动。

我沿着这个链接做了一个切换开关https://www.w3schools.com/howto。这个按钮很好用。但我不知道该怎么做才能达到我想要的效果。我尝试在标签中放置两个选项，但布局被破坏了。

我不能使用其他框架，例如 jQuery。提供纯 JavaScript 支持。

/* The switch - the box around the slider */

.switch {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

}

/* Hide default HTML checkbox */

.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}

/* The slider */

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}

.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}

input:checked + .slider {

  background-color: #2196F3;

}

input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}

input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}

/* Rounded sliders */

.slider.round {

  border-radius: 34px;

}

.slider.round:before {

  border-radius: 50%;

}

<label class="switch">

  <input type="checkbox">

  <span class="slider round"></span>

</label>

Answer 1

用 JavaScript 解决这个问题很简单，但用纯 CSS/HTML 解决这个问题会更有趣。说明：pointer-events: none禁止点击产生任何影响。有选择地用于子元素以重新启用单击它们，pointer-events: all具体取决于checked.input/* the interesting bit */.label {&nbsp; pointer-events: none;&nbsp; display: flex;&nbsp; align-items: center;}.switch,.input:checked + .label .left,.input:not(:checked) + .label .right {&nbsp; pointer-events: all;&nbsp; cursor: pointer;}/* most of the stuff below is the same as the W3Schools stuff,&nbsp; &nbsp;but modified a bit to reflect changed HTML structure */.input {&nbsp; display: none;}.switch {&nbsp; position: relative;&nbsp; display: inline-block;&nbsp; width: 60px;&nbsp; height: 34px;}.slider {&nbsp; position: absolute;&nbsp; cursor: pointer;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; background-color: #ccc;&nbsp; -webkit-transition: 0.4s;&nbsp; transition: 0.4s;}.slider:before {&nbsp; position: absolute;&nbsp; content: "";&nbsp; height: 26px;&nbsp; width: 26px;&nbsp; left: 4px;&nbsp; bottom: 4px;&nbsp; background-color: white;&nbsp; -webkit-transition: 0.4s;&nbsp; transition: 0.4s;}input:checked + .label .slider {&nbsp; background-color: #2196f3;}input:focus + .label .slider {&nbsp; box-shadow: 0 0 1px #2196f3;}input:checked + .label .slider:before {&nbsp; -webkit-transform: translateX(26px);&nbsp; -ms-transform: translateX(26px);&nbsp; transform: translateX(26px);}.slider.round {&nbsp; border-radius: 34px;}.slider.round:before {&nbsp; border-radius: 50%;}/* styling to make it look like your screenshot */.left, .right {&nbsp; margin: 0 .5em;&nbsp; font-weight: bold;&nbsp; text-transform: uppercase;&nbsp; font-family: sans-serif;}<input class="input" id="toggle" type="checkbox"><label class="label" for="toggle">&nbsp; <div class="left">&nbsp; &nbsp; Option A&nbsp; </div>&nbsp; <div class="switch">&nbsp; &nbsp; <span class="slider round"></span>&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; Option B&nbsp; </div></label>

Answer 2

这将帮助您完美地使用两个单选按钮。HTML :-&nbsp;<div class="normal-container">&nbsp; <div class="smile-rating-container">&nbsp; &nbsp; <div class="smile-rating-toggle-container">&nbsp; &nbsp; &nbsp; <form class="submit-rating">&nbsp; &nbsp; &nbsp; &nbsp; <input id="meh"&nbsp; name="satisfaction" type="radio" />&nbsp; &nbsp; &nbsp; &nbsp; <input id="fun" name="satisfaction" type="radio" />&nbsp; &nbsp; &nbsp; &nbsp; <label for="meh" class="rating-label rating-label-meh">Bad</label>&nbsp; &nbsp; &nbsp; &nbsp; <div class="smile-rating-toggle"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="toggle-rating-pill"></div>&nbsp; &nbsp; &nbsp; &nbsp; <label for="fun" class="rating-label rating-label-fun">Fun</label>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div>&nbsp; </div></div>CSS:-&nbsp; &nbsp; .smile-rating-container {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; height: 10%;&nbsp; &nbsp; min-width: 220px;&nbsp; &nbsp; max-width: 520px;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; font-family: 'Roboto', sans-serif;&nbsp; &nbsp; top: 20%;}.submit-rating {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;}.rating-label {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; font-size: 1.6em;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; flex: 0.34;&nbsp; &nbsp; z-index: 3;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; color: grey;&nbsp; &nbsp; transition: 500ms;}.rating-label:hover, .rating-label:active {&nbsp; &nbsp; color: grey;}.rating-label-fun {&nbsp; &nbsp; left: -58px;&nbsp; &nbsp; text-align: right;}.rating-label-meh {&nbsp; &nbsp; left: 58px;&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; color: #222;}.smile-rating-container input {&nbsp; &nbsp; display: none;}.toggle-rating-pill {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; height: 65px;&nbsp; &nbsp; width: 165px;&nbsp; &nbsp; background: grey;&nbsp; &nbsp; border-radius: 500px;&nbsp; &nbsp; transition: all 500ms;}.smile-rating-toggle {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 54px;&nbsp; &nbsp; height: 54px;&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; left: 182px;&nbsp; &nbsp; border-radius: 500px;&nbsp; &nbsp; transition: all 500ms;&nbsp; &nbsp; z-index: 4;}/*Toggle Changes*/#meh:checked~.rating-label-meh {&nbsp;color: #2196f3;}#fun:checked~.rating-label-meh {&nbsp;color: grey;}#fun:checked~.mouth {&nbsp;border: 4px solid #2196f3;&nbsp;border-bottom-color: rgba(1, 1, 1, 0);&nbsp;border-right-color: rgba(1, 1, 1, 0);&nbsp;border-left-color: rgba(1, 1, 1, 0);&nbsp;top: 23px;&nbsp;left: 291px;&nbsp;transform: rotateX(180deg);&nbsp;border-radius: 100%;}&nbsp;#fun:checked~.rating-label-fun {&nbsp;color: #2196f3;}#fun:checked~.smile-rating-toggle {&nbsp;left: 282px;}&nbsp;#fun:checked~.rating-eye-left {&nbsp;left: 292px;}#fun:checked~.rating-eye-right {&nbsp;left: 316px;}&nbsp;#fun:checked~.toggle-rating-pill {&nbsp;background-color: #2196f3;}&nbsp;#fun:checked~.rating-eye {&nbsp;background-color: #2196f3;}