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

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 {

  pointer-events: none;

  display: flex;

  align-items: center;

}

.switch,

.input:checked + .label .left,

.input:not(:checked) + .label .right {

  pointer-events: all;

  cursor: pointer;

}

/* most of the stuff below is the same as the W3Schools stuff,

   but modified a bit to reflect changed HTML structure */

.input {

  display: none;

}

.switch {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

}

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: 0.4s;

  transition: 0.4s;

}

.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: 0.4s;

  transition: 0.4s;

}

input:checked + .label .slider {

  background-color: #2196f3;

}

input:focus + .label .slider {

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

}

input:checked + .label .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}

.slider.round {

  border-radius: 34px;

}

.slider.round:before {

  border-radius: 50%;

}

/* styling to make it look like your screenshot */

.left, .right {

  margin: 0 .5em;

  font-weight: bold;

  text-transform: uppercase;

  font-family: sans-serif;

}

<input class="input" id="toggle" type="checkbox">

<label class="label" for="toggle">

  <div class="left">

    Option A

  </div>

  <div class="switch">

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

  </div>

  <div class="right">

    Option B

  </div>

</label>

Answer 2

这将帮助您完美地使用两个单选按钮。

HTML :-

 <div class="normal-container">

  <div class="smile-rating-container">

    <div class="smile-rating-toggle-container">

      <form class="submit-rating">

        <input id="meh"  name="satisfaction" type="radio" />

        <input id="fun" name="satisfaction" type="radio" />

        <label for="meh" class="rating-label rating-label-meh">Bad</label>

        <div class="smile-rating-toggle"></div>

        <div class="toggle-rating-pill"></div>

        <label for="fun" class="rating-label rating-label-fun">Fun</label>

      </form>

    </div>

  </div>

</div>

CSS:-

    .smile-rating-container {

    position: relative;

    height: 10%;

    min-width: 220px;

    max-width: 520px;

    margin: auto;

    font-family: 'Roboto', sans-serif;

    top: 20%;

}

.submit-rating {

    display: flex;

    align-items: center;

    justify-content: center;

}

.rating-label {

    position: relative;

    font-size: 1.6em;

    text-align: center;

    flex: 0.34;

    z-index: 3;

    font-weight: bold;

    cursor: pointer;

    color: grey;

    transition: 500ms;

}

.rating-label:hover, .rating-label:active {

    color: grey;

}

.rating-label-fun {

    left: -58px;

    text-align: right;

}

.rating-label-meh {

    left: 58px;

    text-align: left;

    color: #222;

}

.smile-rating-container input {

    display: none;

}

.toggle-rating-pill {

    position: relative;

    height: 65px;

    width: 165px;

    background: grey;

    border-radius: 500px;

    transition: all 500ms;

}

.smile-rating-toggle {

    position: absolute;

    width: 54px;

    height: 54px;

    background-color: white;

    left: 182px;

    border-radius: 500px;

    transition: all 500ms;

    z-index: 4;

}

/*

Toggle Changes

*/

#meh:checked~.rating-label-meh {

 color: #2196f3;

}

#fun:checked~.rating-label-meh {

 color: grey;

}

#fun:checked~.mouth {

 border: 4px solid #2196f3;

 border-bottom-color: rgba(1, 1, 1, 0);

 border-right-color: rgba(1, 1, 1, 0);

 border-left-color: rgba(1, 1, 1, 0);

 top: 23px;

 left: 291px;

 transform: rotateX(180deg);

 border-radius: 100%;

}

 #fun:checked~.rating-label-fun {

 color: #2196f3;

}

#fun:checked~.smile-rating-toggle {

 left: 282px;

}

 #fun:checked~.rating-eye-left {

 left: 292px;

}

#fun:checked~.rating-eye-right {

 left: 316px;

}

 #fun:checked~.toggle-rating-pill {

 background-color: #2196f3;

}

 #fun:checked~.rating-eye {

 background-color: #2196f3;

}