刷(ON-OFF)按钮通过复选框，html

the Swipe (ON-OFF) button via checkbox ,html

本文关键字：复选框 html 按钮 ON-OFF      更新时间：2023-09-26
<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我只是让滑动按钮通过复选框(on - off)，当我按下改变图像，但当回到关闭不改变

谁来帮帮我

试试这个:

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

function changeImage() {
checkBox =  document.getElementById('myonoffswitch');
    element= document.getElementById('myimage') ;
    if  (checkBox.checked )
    {
       element.src="PIC/w.png";
    }
    else
    {
         element.src="PIC/b.png";
    }
}
相关文章：