Question

我创建了一个开关切换，如果我创建了多个开关，它就不能正常工作。

HTML

<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>

这里是Js Fiddle：http://jsfiddle.net/dgj7s5sk/ 有人帮助我解决这个问题。

Answer 1

您不能拥有多个具有相同ID的元素。

将第二个input的ID更改为其他内容（以及for中的label值），以便label知道它们与哪个元素相关到。

这有效：

<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>

请参阅fiddle

Answer 2

每个“开关切换”必须具有自己的ID。尝试：

<input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox" id="myonoffswitch1" checked>
<label class="onoffswitch-label" for="myonoffswitch1">
...
<input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
<label class="onoffswitch-label" for="myonoffswitch2">

Answer 3

使用ID而不是类。除了包裹div之外，为每个元素分配ID。

如何实现多个开关按钮？

3 个答案: