如果需要使用圖片來實現checkbox的使用，可以使用來實現，實現原理是將label表簽代替checkbox的顯示，將checkbox的display設置為none,在label標簽中使用要顯示的圖片img，再使用js函數去控制圖片的選中與否的切換。
JavaScript Code復制內容到剪貼板
- <label for="agree" >
- <img class="checkbox" alt="選中" src="../img/checked.png" 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(':checked') ){
- $("#agree").attr("checked","unchecked");
- checkimg.src="../img/unchecked.png";
- checkimg.alt="未選";
- } else{
- $("#agree").attr("checked","checked");
- checkimg.src="../img/checked.png";
- checkimg.alt="選中";
- }
- }
- </script>
以上就是小編為大家帶來的Html中使用自定義圖片來實現checkbox顯示的方法全部內容了，希望大家多多支持~
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。