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复选框类当我按下更改图像时，我通过复选框（开 - 关）制作滑动按钮，但是当返回到关闭时不会改变

请某人帮帮我

Answer 1

试试这个：

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

}

通过复选框，html滑动（开 - 关）按钮

2 个答案: