通过复选框，滑动（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>

check box class with css ijust made the swipe button via check box (ON-OFF) when i press on change the image but when come back to off doesn't change

please some one help me

Answer 1

Try this:

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";
    }
}

Answer 2

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

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

}