开关箱:多个开关箱不工作在我的页面

Switch box:multiple switch boxes are not working in my page

本文关键字：开关箱 我的 工作      更新时间：2023-09-26

我有一个开关按钮工作良好。但是当我使用更多的开关按钮时，功能就不起作用了。如果我点击第二个，第一个开关就会从开变成关或者从关变成开

这是我的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

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

两个元素需要有不同的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>
相关文章：