Html中使用自訂圖片來實作checkbox顯示的方法

下面小編就為大家帶來一篇Html中使用自訂圖片來實現checkbox顯示的方法。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

如果需要使用圖片來實現checkbox的使用，可以使用來實現，實現原理是將label表簽代替checkbox的顯示，將checkbox的display設置為none,在label標籤中使用要顯示的圖片img，再使用js函數去控制圖片的選取與否的切換。

JavaScript Code複製內容到剪貼板

<label  for="agree" >              
        <img class="checkbox lazy"  src="/static/imghwm/default1.png"  data-src="../img/checked.png"    alt="选中"  id="checkimg" onclick="checkclick();">   
     </label>      
     <input type="checkbox"  style="display:none" id="agree" checked="checked">   
     <script>   
         function checkclick(){   
            var checkimg = document.getElementById("checkimg");   
            if($("#agree").is(&#39;:checked&#39;) ){   
                $("#agree").attr("checked","unchecked");   
                checkimg.src="../img/unchecked.png";   
                checkimg.alt="未选";   
            } else{   
                $("#agree").attr("checked","checked");   
                checkimg.src="../img/checked.png";   
                checkimg.alt="选中";   
            }   
        }   
    </script>

以上就是小編為所有內容帶來的Htmlcheck了PHP中文網~

更多Html中使用自訂圖片來實現checkbox顯示的方法相關文章請關注PHP中文網！