的滑動（ON-OFF）按鈕，HTML

Question

<div class="onoffswitch">//checkbox class with css 
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked onClick="changeImage()">//checkbox class with css 
<label class="onoffswitch-label" for="myonoffswitch">//checkbox class with css 
<div class="onoffswitch-inner"></div>//checkbox class with css 
<div class="onoffswitch-switch"></div>//checkbox class with css 
</label> 
</div> 

<script> function changeImage() { 
    element=document.getElementById('myimage') 
    if (element.src.match("bulbon")) { 
     element.src="PIC/WXXL.png"; 
    } else { 
     element.src="PIC/idea-xxl.png"; } 
    } 
</script> 

複選框類具有的CSS ijust經由複選框（ON-OFF）作出的滑動按鈕，當我上變化按圖像，但是當回來關不改變

請有人幫我

Answer 1

function changeImage() { 
checkBox = document.getElementById('myonoffswitch'); 
    element= document.getElementById('myimage') ; 

    if (checkBox.checked) 
    { 
     element.src="PIC/w.png"; 
    } 
    else 
    { 
     element.src="PIC/b.png"; 
    } 

} 

Answer 2

試試這個：

HTML

<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked onClick="changeImage(this)" /> 
    <label class="onoffswitch-label" for="myonoffswitch"> 
     <div class="onoffswitch-inner"></div> 
     <div class="onoffswitch-switch"></div> 
    </label> 
</div> 

JS

function changeImage(sender) { 
    element=document.getElementById('myimage'); 

    if (!sender.checked) { 
     element.src="PIC/WXXL.png"; 
    } else { 
     element.src="PIC/idea-xxl.png"; 
    } 
}