Question

我有一个开关按钮，工作正常。但是当我使用更多的开关按钮时，功能无法正常工作。如果我点击第二个开关，第一个开关将从开启移至关闭或关闭开启

这是我的css和Html：

<html>
<head>
<style type="text/css">
   .onoffswitch {
       position: relative; width: 90px;
       -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
   }
   .onoffswitch-checkbox {
       display: none;
   }
   .onoffswitch-label {
       display: block; overflow: hidden; cursor: pointer;
       border: 2px solid #E6E6E6; border-radius: 50px;
   }
   .onoffswitch-inner {
       display: block; width: 200%; margin-left: -100%;
       transition: margin 0.3s ease-in 0s;
   }
   .onoffswitch-inner:before, .onoffswitch-inner:after {
       display: block; float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
       font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
       box-sizing: border-box;
   }
   .onoffswitch-inner:before {
       content: "YES";
       padding-left: 13px;
       background-color: #61A1E1; color: #FFFFFF;
   }
   .onoffswitch-inner:after {
       content: "NO";
       padding-right: 13px;
       background-color: #F01F1F; color: #FFFFFF;
       text-align: right;
   }
   .onoffswitch-switch {
       display: block; width: 27px; margin: 4.5px;
       background: #FFFFFF;
       position: absolute; top: 0; bottom: 0;
       right: 50px;
       border: 2px solid #E6E6E6; border-radius: 50px;
       transition: all 0.3s ease-in 0s; 
   }
   .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
       margin-left: 0;
   }
   .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
       right: 0px; 
   }
</style>
</head>
<body>
   <div class="onoffswitch">
       <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
       <label class="onoffswitch-label" for="myonoffswitch">
           <span class="onoffswitch-inner"></span>
           <span class="onoffswitch-switch"></span>
       </label>
   </div>
   <div class="onoffswitch">
       <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
       <label class="onoffswitch-label" for="myonoffswitch">
           <span class="onoffswitch-inner"></span>
           <span class="onoffswitch-switch"></span>
       </label>
   </div>

</body>
</html>

现在我希望它能单独用于切换按钮。我没有得到我错的地方。

请帮我解决这个问题。

非常感谢提前

working jsfiddle demo

在演示小提琴中，当我点击第二个开关按钮时，第一个按钮正在移动。

Answer 1

两个元素都需要具有不同的ID才能使其工作。请参阅更新的小提琴https://jsfiddle.net/mileandra/SkRN9/30/

<div class="onoffswitch">
       <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked="checked" />
       <label class="onoffswitch-label" for="myonoffswitch">
           <span class="onoffswitch-inner"></span>
           <span class="onoffswitch-switch"></span>
       </label>
   </div>
   <div class="onoffswitch">
       <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" checked="checked" />
       <label class="onoffswitch-label" for="myonoffswitch2">
           <span class="onoffswitch-inner"></span>
           <span class="onoffswitch-switch"></span>
       </label>
   </div>

开关盒：我的页面中没有多个开关盒

1 个答案: