하나 이상의 스위치 단추를 구현하는 방법은 무엇입니까?

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 바이올린 : http://jsfiddle.net/dgj7s5sk/ 어떤 일이 나를 도와.

Answer 1

동일한 ID를 가진 요소를 두 개 이상 가질 수 없습니다.

변경 (당신의 label의 for 값과 함께) 뭔가 다른 두 번째 input의 ID입니다 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를 사용하십시오. wraping div을 제외하고 각 요소에 ID를 할당하십시오.